@cloudbase/weda-ui 3.11.10 → 3.12.0

package/dist/web/components/form/uploader/uploader.pc.d.ts

@@ -12,11 +12,13 @@ interface TempFileProps {
 export declare function UploaderPCInner(props: PropsType): JSX.Element;
 export interface TcbImageProps {
     fileID?: string;
+    allFile?: TempFileProps[];
     tempFile?: TempFileProps;
+    index?: number;
     isZoom?: boolean;
     onError?: (e: unknown) => void;
     imgTypeCls?: string;
-    preivewIcon?: string;
+    previewIcon?: string;
     actions?: React.ReactNode;
 }
 export declare const TcbImage: (props: TcbImageProps) => JSX.Element;

package/dist/web/components/form/uploader/uploader.pc.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Upload, Icon, ErrorTip, ImagePreview, ConfigProvider, } from 'tea-component';
+import { Upload, Icon, ErrorTip, ConfigProvider } from 'tea-component';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
 import { toBase64Uri } from '../../../utils/file2base64';
 import { isNil } from '../../../utils/lodash';
 import { errorHandler } from '../../../utils/error';
 import { WdIcon } from '../../wd-icon';
 import { useUploader } from './useUploadFile';
+import { ImagePreview } from '../../wd-image/ImagePreview';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -119,7 +120,7 @@ export function UploaderPCInner(props) {
     tips && (extraProps['title'] = tips);
     maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
     const hasActions = !uploading && !readOnly && !(disabled || sourceType === 'camera');
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [tempFile === null || tempFile === void 0 ? void 0 : tempFile.map((d) => (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsx(TcbImage, { tempFile: d, imgTypeCls: imgTypeCls, isZoom: true, preivewIcon: "td:browse", actions: hasActions && (_jsx(WdIcon, { className: `${CLASS_PREFIX}__image-actions-delete`, name: "td:delete", onClick: () => deleteHandle(d), size: "sm" })) }) }, d.key))), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && tempFile.length < 1 && _jsx("div", { children: "-" }), sourceType === 'camera' || (disabled && !readOnly) ? (_jsx("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] }) })) : (((!single && tempFile.length < maxUploadCount) ||
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [tempFile === null || tempFile === void 0 ? void 0 : tempFile.map((d, index) => (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsx(TcbImage, { index: index, allFile: tempFile, tempFile: d, imgTypeCls: imgTypeCls, isZoom: true, previewIcon: "td:browse", actions: hasActions && (_jsx(WdIcon, { className: `${CLASS_PREFIX}__image-actions-delete`, name: "td:delete", onClick: () => deleteHandle(d), size: "sm" })) }) }, d.key))), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && tempFile.length < 1 && _jsx("div", { children: "-" }), sourceType === 'camera' || (disabled && !readOnly) ? (_jsx("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] }) })) : (((!single && tempFile.length < maxUploadCount) ||
                             (single && tempFile.length < 1 && !uploading)) &&
                             !readOnly && (
                         // single 模式时，当数组为空且不在上传文件过程中时显示
@@ -132,13 +133,13 @@ export function UploaderPCInner(props) {
                                 className: `_weda-fn-upload-result__item _weda-fn-upload-result__item--upload ${imgTypeCls}`, children: [imgTypeCls, _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] })] }) })))] })] }) }));
 }
 export const TcbImage = (props) => {
-    const { fileID, tempFile = { progress: 100, loading: false, realUrl: null, tempUrl: null }, isZoom, imgTypeCls, preivewIcon, actions, ...rest } = props;
+    const { fileID, tempFile = { progress: 100, loading: false, realUrl: null, tempUrl: null }, isZoom, imgTypeCls, previewIcon, actions, allFile, index, ...rest } = props;
     const { progress, loading, realUrl, tempUrl } = tempFile;
     const fileCloudID = (realUrl !== null && realUrl !== void 0 ? realUrl : tempUrl) || fileID;
     const [isError, setIsError] = React.useState(false);
     const { data: src, error: requestError } = useTempUrl(fileCloudID);
     const encodeSrc = encodeConvert(src);
-    const renderImg = () => {
+    const renderImg = (open) => {
         if (isError || requestError)
             return _jsx(ErrorTip, {});
         if (!src)
@@ -146,28 +147,31 @@ export const TcbImage = (props) => {
         return (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "uploaderpc_imgStyle", className: `${CLASS_PREFIX}__image ${imgTypeCls}`, ...rest, src: encodeURI(encodeSrc), onError: (e) => {
                         setIsError(true);
                         (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
+                    }, onClick: () => {
+                        if (open) {
+                            open();
+                        }
                     } }), loading && (_jsxs("div", { className: "_weda-fn-upload-result__status loading_bac", children: [_jsx(Icon, { type: "loading" }), _jsxs("div", { className: "wedatea2td-mt-1n wedatea2td-fz-reset", children: [progress, "%"] })] }))] }));
     };
     if (!isZoom)
         return renderImg();
+    const previewImageList = allFile.map((i) => i.realUrl || i.tempUrl);
     const previewProps = {
-        key: fileCloudID,
+        index,
         'data-testid': 'uploaderpc_imgStyle',
         className: `${CLASS_PREFIX}__image ${imgTypeCls}`,
-        ...rest,
-        previewSrc: encodeURI(encodeSrc),
-        onError: (e) => {
-            setIsError(true);
-            (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
-        },
+        src: encodeURI(encodeSrc),
+        previewImageList,
     };
-    if (preivewIcon || actions) {
+    if (previewIcon || actions) {
         return (_jsx(ImagePreview, { ...previewProps, children: (open) => {
-                return (_jsxs(_Fragment, { children: [renderImg(), _jsxs("div", { className: `_weda-fn-upload-result__op ${imgTypeCls} ${CLASS_PREFIX}__image-actions`, children: [preivewIcon && (_jsx(WdIcon, { name: preivewIcon, onClick: open, className: `${CLASS_PREFIX}__image-actions-open`, size: "sm" })), actions && (_jsxs("span", { className: `${CLASS_PREFIX}__image-actions-separator`, children: [' ', "|", ' '] })), actions] })] }));
+                return (_jsxs(_Fragment, { children: [renderImg(), _jsxs("div", { className: `_weda-fn-upload-result__op ${imgTypeCls} ${CLASS_PREFIX}__image-actions`, children: [previewIcon && (_jsx(WdIcon, { name: previewIcon, onClick: open, className: `${CLASS_PREFIX}__image-actions-open`, size: "sm" })), actions && (_jsx("span", { className: `${CLASS_PREFIX}__image-actions-separator`, children: "|" })), actions] })] }));
             } }));
     }
     else {
-        return _jsx(ImagePreview, { ...previewProps, src: encodeURI(encodeSrc) });
+        return (_jsx(ImagePreview, { ...previewProps, children: (open) => {
+                return renderImg(open);
+            } }));
     }
 };
 //兼容私有化下载链接encodeURIComponent被编码情况

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

@@ -66,9 +66,9 @@ export function WdFormItem(props) {
     const Message = validateErrorMsg && (_jsx("p", { className: `${item}__help`, children: _jsx("span", { className: `${classPrefix}-g-text-${validateState} ${root}__error`, children: textToString(validateErrorMsg) }) }));
     if (!visible)
         return null;
-    return (_jsxs("div", { className: cls, id: isRoot ? id : null, style: style, children: [_jsx("div", { className: itemWrap, children: LabelContainer ? (_jsx(LabelContainerComp, { LabelContainer: LabelContainer, isRoot: isRoot, isH5: isH5, Label: Label, Item: Item })) : (_jsxs(_Fragment, { children: [Label, Item] })) }), Message, Help] }));
+    return (_jsxs("div", { className: cls, id: isRoot ? id : null, style: style, children: [_jsx("div", { className: itemWrap, children: LabelContainer ? (_jsx(LabelContainerComp, { LabelContainer: LabelContainer, isRoot: isRoot, isH5: isH5, Label: Label, Item: Item, mode: props === null || props === void 0 ? void 0 : props.mode })) : (_jsxs(_Fragment, { children: [Label, Item] })) }), Message, Help] }));
 }
-const LabelContainerComp = ({ isRoot, isH5, Label, Item, LabelContainer }) => {
+const LabelContainerComp = ({ isRoot, isH5, Label, Item, LabelContainer, mode, }) => {
     const showLabel = isRoot && !isH5;
-    return (_jsxs(_Fragment, { children: [showLabel && Label, _jsx(LabelContainer, { isRoot: isRoot, Label: Label, Item: Item })] }));
+    return (_jsxs(_Fragment, { children: [showLabel && Label, _jsx(LabelContainer, { isRoot: isRoot, Label: Label, Item: Item, mode: mode })] }));
 };

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

@@ -27,7 +27,7 @@ const classRoot = 'form-obj';
  */
 const getValueName = (operateName, currentName) => operateName.replace(new RegExp(`^${currentName}(\\.)?`), '');
 const LabelContainer = (props) => {
-    const { Label, Item } = props || {};
+    const { Label, Item, mode } = props || {};
     const cardRef = React.createRef();
     const [iconName, setIconName] = useState('chevronup');
     const headerSlot = (_jsxs(_Fragment, { children: [_jsx(WdIcon, { name: iconName, events: {
@@ -35,6 +35,9 @@ const LabelContainer = (props) => {
                         setIconName(iconName === 'chevrondown' ? 'chevronup' : 'chevrondown');
                     },
                 } }), Label] }));
+    if (mode === 'custom' || mode === 'table') {
+        return _jsx(_Fragment, { children: Item });
+    }
     return (_jsx(WdCard, { ref: cardRef, className: iconName === 'chevrondown' ? 'wd-card-content__hidden' : '', showContent: true, headerSlot: headerSlot, contentSlot: Item, events: { tap: () => { } } }));
 };
 export const BaseFormObj = forwardRef(function BaseFormObj(props, ref) {

package/dist/web/components/wd-image/ImagePreview.d.ts

@@ -0,0 +1 @@
+export declare const ImagePreview: (props: any) => JSX.Element;

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

@@ -0,0 +1,127 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import React, { useState, useMemo } from 'react';
+import { useGesture } from '@use-gesture/react';
+import { Portal } from '../common/portal';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
+import { WdIcon } from '../wd-icon';
+const ASPECT_RATIO = 1;
+export const ImagePreview = (props) => {
+    const { portalContainer, isStopPropagation = false, maskClosable = false, src, style = {}, children, previewImageList = [], index = 0, } = props;
+    // cloud 或者 https
+    const [currentImg, setCurrentImg] = useSyncValue(previewImageList[index], isObjectEqual);
+    const [visible, setVisible] = useState(false);
+    const platform = usePlatform();
+    const [translateX, setTranslateX] = React.useState(0);
+    const [translateY, setTranslateY] = React.useState(0);
+    const [previewScale, setPreviewScale] = React.useState(ASPECT_RATIO);
+    const [rotate, setRotate] = React.useState(0);
+    const { data: realSrc } = useTempUrl(currentImg);
+    const previewStyle = platform === 'h5'
+        ? {
+            touchAction: 'none',
+            backgroundImage: `url('${realSrc || src}')`,
+            transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
+            ...style,
+        }
+        : {
+            touchAction: 'none',
+            backgroundImage: `url('${realSrc || src}')`,
+            transform: `rotate(${rotate}deg)`,
+            ...style,
+        };
+    const { classPrefix } = useConfig();
+    React.useEffect(() => {
+        // 防止触发浏览器的放大缩小
+        const handler = (e) => e.preventDefault();
+        document.addEventListener('gesturestart', handler);
+        document.addEventListener('gesturechange', handler);
+        return () => {
+            document.removeEventListener('gesturestart', handler);
+            document.removeEventListener('gesturechange', handler);
+        };
+    }, []);
+    const onMaskClick = (e) => {
+        if (isStopPropagation) {
+            e.stopPropagation();
+        }
+        if (maskClosable) {
+            setVisible(false);
+        }
+    };
+    const bind = useGesture({
+        onClick: ({ event }) => {
+            // 防止冒泡出发关闭预览
+            event.stopPropagation();
+            if (maskClosable) {
+                setVisible(false);
+            }
+        },
+        onPinch: ({ offset }) => {
+            const [s] = offset;
+            setPreviewScale(s);
+        },
+        onDrag: ({ offset, event }) => {
+            event.stopPropagation();
+            const [x, y] = offset;
+            setTranslateX(x);
+            setTranslateY(y);
+        },
+    }, {
+        drag: {
+            delay: true,
+            preventDefault: true,
+            from: () => [translateX, translateY],
+        },
+        pinch: {
+            scaleBounds: { min: 0.6, max: 5 },
+            pointer: {
+                touch: true,
+            },
+        },
+    });
+    const child = useMemo(() => {
+        return children(() => {
+            setVisible(true);
+            // 重置
+            setPreviewScale(ASPECT_RATIO);
+            setRotate(0);
+            setTranslateX(0);
+            setTranslateY(0);
+        });
+    }, [children]);
+    return (_jsxs(_Fragment, { children: [child, visible && (_jsx(Portal, { type: "div", portalContainer: portalContainer, children: _jsx("div", { "data-testid": "portal-container", style: { zIndex: 1001, position: 'relative' }, className: `${classPrefix}-image-preview-container`, children: _jsxs("div", { className: `${classPrefix}-image-mask`, onClick: onMaskClick, children: [_jsx("div", { onClick: (e) => {
+                                    if (isStopPropagation) {
+                                        e.stopPropagation();
+                                    }
+                                    setVisible(false);
+                                }, className: `${classPrefix}-image-mask__close-btn`, children: _jsx("i", { className: `${classPrefix}-image-mask__icon-close` }) }), _jsx("div", { ...bind(), className: `${classPrefix}-image-preview`, style: previewStyle }), platform === 'pc' && (_jsxs("div", { className: `${classPrefix}-image-preview-toolbar`, children: [(previewImageList === null || previewImageList === void 0 ? void 0 : previewImageList.length) > 1 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "wd-icon-wrap wd-event-tap", children: _jsx(WdIcon, { name: 'td:chevron-left', size: "sm", events: {
+                                                        tap: () => {
+                                                            const index = previewImageList.findIndex((i) => i === currentImg);
+                                                            const currentIndex = index === 0
+                                                                ? previewImageList.length - 1
+                                                                : index - 1;
+                                                            setCurrentImg(previewImageList[currentIndex]);
+                                                            setRotate(0);
+                                                        },
+                                                    } }) }), _jsx("span", { className: "wd-icon-wrap wd-event-tap", children: _jsx(WdIcon, { name: 'td:chevron-right', size: "sm", events: {
+                                                        tap: () => {
+                                                            const index = previewImageList.findIndex((i) => i === currentImg);
+                                                            const currentIndex = index === previewImageList.length - 1
+                                                                ? 0
+                                                                : index + 1;
+                                                            setCurrentImg(previewImageList[currentIndex]);
+                                                            setRotate(0);
+                                                        },
+                                                    } }) })] })), _jsx("span", { className: "wd-icon-wrap wd-event-tap", children: _jsx(WdIcon, { name: 'td:anticlockwise', size: "sm", events: {
+                                                tap: (arg, { originEvent: e }) => {
+                                                    e.stopPropagation();
+                                                    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                                                    setRotate(rotate + 90);
+                                                },
+                                            } }) })] }))] }) }) }))] }));
+};

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

@@ -1,27 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { usePlatform } from '../../utils/platform';
-import { useGesture } from '@use-gesture/react';
-import { useConfig } from '../../utils/config-context';
 import { useRef } from 'react';
-import { Portal } from '../common/portal';
+import { ImagePreview } from './ImagePreview';
 const ASPECT_RASIO = 1;
 const OFFSET_RASIO = 0.5;
-const SCALE_RASIO_PC = 0.8;
-const SCALE_RASIO_H5 = 1;
+const SCALE_RADIO_PC = 0.8;
+const SCALE_RADIO_H5 = 1;
 export function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, id, isStopPropagation, }) {
     var _a;
-    const { classPrefix } = useConfig();
     const platform = usePlatform();
-    const [imgShow, setImgShow] = React.useState(false);
-    const onMaskClick = (e) => {
-        if (isStopPropagation) {
-            e.stopPropagation();
-        }
-        if (maskClosable) {
-            setImgShow(false);
-        }
-    };
     const portalContainer = useRef((_a = document.getElementById('root')) !== null && _a !== void 0 ? _a : document.body);
     const [showHeight, setShowHeight] = React.useState(0);
     const [showWidth, setShowWidth] = React.useState(0);
@@ -29,143 +17,45 @@ export function ImageInner({ objectFit, style, className, alt, src, isError, set
     const realHeight = React.useRef(0);
     const [offsetHeight, setOffsetHeight] = React.useState(0);
     const [offsetWidth, setOffsetWidth] = React.useState(0);
-    const [translateX, setTranslateX] = React.useState(0);
-    const [translateY, setTranslateY] = React.useState(0);
-    const [previewScale, setPreviewScale] = React.useState(ASPECT_RASIO);
-    React.useEffect(() => {
-        // 防止触发浏览器的放大缩小
-        const handler = (e) => e.preventDefault();
-        document.addEventListener('gesturestart', handler);
-        document.addEventListener('gesturechange', handler);
-        return () => {
-            document.removeEventListener('gesturestart', handler);
-            document.removeEventListener('gesturechange', handler);
-        };
-    }, []);
-    const bind = useGesture({
-        onClick: ({ event }) => {
-            // 防止冒泡出发关闭预览
-            event.stopPropagation();
-            if (maskClosable) {
-                setImgShow(false);
-            }
-        },
-        onPinch: ({ offset }) => {
-            const [s] = offset;
-            setPreviewScale(s);
-        },
-        onDrag: ({ offset, event }) => {
-            event.stopPropagation();
-            const [x, y] = offset;
-            setTranslateX(x);
-            setTranslateY(y);
-        },
-    }, {
-        drag: {
-            delay: true,
-            preventDefault: true,
-            from: () => [translateX, translateY],
-        },
-        pinch: {
-            scaleBounds: { min: 0.6, max: 5 },
-            pointer: {
-                touch: true,
-            },
-        },
-    });
-    if (platform === 'h5' || !imgPreview || isError) {
-        return (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "wd-image", 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(Portal, { type: "div", portalContainer: portalContainer, children: _jsx("div", { "data-testid": "portal-container", style: { zIndex: 1001, position: 'relative' }, 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}')`,
-                                        transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
-                                        width: showWidth,
-                                        height: showHeight,
-                                        marginTop: offsetHeight,
-                                        marginLeft: offsetWidth,
-                                    } })] }) }) }))] }));
-    }
-    else {
-        return (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "wd-image", 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(Portal, { type: "div", portalContainer: portalContainer, children: _jsx("div", { "data-testid": "portal-container", style: { zIndex: 1001, position: 'relative' }, 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,
-                                    } })] }) }) }))] }));
-    }
+    const SCALE_RADIO = platform === 'h5' ? SCALE_RADIO_H5 : SCALE_RADIO_PC;
+    const previewStyle = {
+        width: showWidth,
+        height: showHeight,
+        marginTop: offsetHeight,
+        marginLeft: offsetWidth,
+    };
+    return (_jsx(ImagePreview, { portalContainer: portalContainer, maskClosable: maskClosable, style: previewStyle, src: src, children: (open) => {
+            return (_jsx("img", { "data-testid": "wd-image", id: id, style: {
+                    objectFit,
+                    ...style,
+                }, className: `${className}`, 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();
+                    }
+                    events.tap && events.tap({}, { originEvent: e });
+                    if (imgPreview && !isError) {
+                        const windowHeight = window.innerHeight;
+                        const windowWidth = window.innerWidth;
+                        const widthRasio = (windowWidth * SCALE_RADIO) / realWidth.current;
+                        const heightRasio = (windowHeight * SCALE_RADIO) / 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);
+                        open();
+                    }
+                }, loading: lazyLoad ? 'lazy' : undefined }));
+        } }));
 }

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useState, useMemo, useEffect, } from 'react';
 import classNames from '../../utils/classnames';
 import { ImageInner } from './image';
+import { usePlatform } from '../../utils/platform';
 import { emptyObject } from '../../utils/constant';
 import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
 import { useConfig } from '../../utils/config-context';
@@ -13,10 +14,13 @@ className, events = emptyObject, style,
 src, alt, mode, lazyLoad = false, imgPreview = false, maskClosable = true, fit, id, isStopPropagation = false, }, ref) {
     const [isError, setIsError] = useState(false);
     const { classPrefix } = useConfig();
+    const platform = usePlatform();
     const cls = classNames({
         [`${classPrefix}-image`]: true,
         [`${classPrefix}-image__error`]: isError,
         [className]: className,
+        [`${classPrefix}-${platform}-image`]: true,
+        [`${classPrefix}-image__zoom-in`]: platform === 'h5' || !imgPreview || isError,
     });
     const objectFit = fit || getObjectFitByWxImageMode(mode);
     const { data: realSrc, isLoading } = useTempUrl(src);

package/dist/web/components/wd-menu-list/CommonMenuList.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useState, useContext, useCallback, useMemo, } from 'react';
+import destr from 'destr';
 import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
 import { usePlatform } from '../../utils/platform';
@@ -11,7 +12,15 @@ import { MenuLayoutContext } from '../wd-menu-layout/utils';
 export const CommonMenuList = forwardRef(function CommonMenuList(props, ref) {
     const { className = '', style, id } = props;
     const [selected, setSelected] = useState('');
-    const [openStatus, setOpenStatus] = useState({});
+    const [openStatus, setOpenStatus] = useState(() => {
+        try {
+            const status = localStorage.getItem('menu_open_status');
+            return status ? destr(status) : {};
+        }
+        catch (error) {
+            return {};
+        }
+    });
     const platform = usePlatform();
     const menuLayoutContext = useContext(MenuLayoutContext);
     // 样式
@@ -123,6 +132,8 @@ export const CommonMenuList = forwardRef(function CommonMenuList(props, ref) {
                 'is-disabled': !!disabled,
             }), title: renderMenuTitle(item), defaultOpened: props.defaultOpened, opened: isOpened, onOpenedChange: (isOpened) => {
                 setOpenStatus((prev) => ({ ...prev, [itemKey]: isOpened }));
+                const result = { ...openStatus, [itemKey]: isOpened };
+                localStorage.setItem('menu_open_status', JSON.stringify(result));
             }, children: children === null || children === void 0 ? void 0 : children.map((el) => renderSubMenu(el, true, String(Number(level) + Number('1')))) }, itemKey)) : (renderMenuItem(item, level));
     };
     return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { id: id, className: classNames(classes, className), style: style, children: _jsx(Menu, { children: menuData === null || menuData === void 0 ? void 0 : menuData.map((item) => {

package/dist/web/components/wd-rich-text/wd-rich-text.js

@@ -18,7 +18,7 @@ export const WdRichText = forwardRef(function WdRichText(props, ref) {
         ...trait,
         classRoot,
         readOnly: false,
-        size: 'lg',
+        size: 'md',
     };
     if (!visible)
         return null;

package/dist/web/components/wd-table/components/FieldRender/ImagePreview.js

@@ -1,8 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Image from '../../../wd-image';
+import { ImagePreview as ImagePreviewCom } from '../../../wd-image/ImagePreview';
 import { useConfig } from '../../../../utils/config-context';
 export const ImagePreview = ({ srcList }) => {
     const { classPrefix } = useConfig();
     const res = [].concat(srcList);
-    return (_jsx("div", { className: `${classPrefix}-table-image-preview`, children: res === null || res === void 0 ? void 0 : res.map((i, index) => (_jsx(Image, { src: i, maskClosable: false, alt: '', imgPreview: true, lazyLoad: true, isStopPropagation: true }, index))) }));
+    return (_jsx("div", { className: `${classPrefix}-table-image-preview`, onClick: (e) => {
+            e.stopPropagation();
+        }, children: res === null || res === void 0 ? void 0 : res.map((i, index) => (_jsx(ImagePreviewCom, { index: index, previewImageList: res, src: i, children: (open) => {
+                return (_jsx("span", { onClick: () => {
+                        open();
+                    }, children: _jsx(Image, { src: i, maskClosable: false, alt: '', imgPreview: false, lazyLoad: true }) }));
+            } }, index))) }));
 };

package/dist/web/components/wd-table/components/FieldRender/index.js

@@ -279,10 +279,10 @@ export function getFieldRender(field = {}, extra = {}) {
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
-                                }, children: showStr.substring(1) }), ((_l = strRef === null || strRef === void 0 ? void 0 : strRef.current) === null || _l === void 0 ? void 0 : _l.scrollWidth) > ((_m = strRef === null || strRef === void 0 ? void 0 : strRef.current) === null || _m === void 0 ? void 0 : _m.offsetWidth) ? (_jsx("a", { className: "field-array-item", style: { margin: 'auto 2px' }, children: _jsx(QuoteModal, { className: "e-array-view-modal", size: modalSize, text: '更多', children: _jsx(ModalTable, { style: { height: '572px' }, bindMetadata: param, dataSourceType: 'data-model', columnSets: undefined, columnSelectType: 'disabled', whereModal: whereList }) }) })) : (_jsx(_Fragment, {}))] }));
+                                }, children: showStr.substring(1) }), ((_l = strRef === null || strRef === void 0 ? void 0 : strRef.current) === null || _l === void 0 ? void 0 : _l.scrollWidth) > ((_m = strRef === null || strRef === void 0 ? void 0 : strRef.current) === null || _m === void 0 ? void 0 : _m.offsetWidth) ? (_jsx("a", { className: "field-array-item", style: { margin: 'auto 2px' }, children: _jsx(QuoteModal, { className: "e-array-view-modal", size: modalSize, text: '更多', children: _jsx(ModalTable, { style: { height: isH5 ? 'auto' : '572px' }, bindMetadata: param, dataSourceType: 'data-model', columnSets: undefined, columnSelectType: 'disabled', whereModal: whereList }) }) })) : (_jsx(_Fragment, {}))] }));
                 }
                 if (format === 'one-many') {
-                    return (_jsx("a", { className: "field-array-item", children: _jsx(QuoteModal, { className: "e-array-view-modal", size: modalSize, text: '详情', children: _jsx(ModalTable, { style: { height: '572px' }, bindMetadata: param, dataSourceType: 'data-model', columnSets: undefined, columnSelectType: 'disabled', whereModal: whereList }) }) }));
+                    return (_jsx("a", { className: "field-array-item", children: _jsx(QuoteModal, { className: "e-array-view-modal", size: modalSize, text: '详情', children: _jsx(ModalTable, { style: { height: isH5 ? 'auto' : '572px' }, bindMetadata: param, dataSourceType: 'data-model', columnSets: undefined, columnSelectType: 'disabled', whereModal: whereList }) }) }));
                 }
             }
             else {

package/dist/web/components/wd-table/hooks/useChooseList.js

@@ -61,7 +61,7 @@ export const useChooseList = ({ dataSourceAPI, queryParams, childDbName, primary
                 db: childDbName,
             }),
         ];
-        if (value === null || value === void 0 ? void 0 : value.length) {
+        if (value) {
             if (isMultiple) {
                 value.forEach((i) => {
                     if (i) {
@@ -94,7 +94,7 @@ export const useChooseList = ({ dataSourceAPI, queryParams, childDbName, primary
         setTotal(result === null || result === void 0 ? void 0 : result.total);
         setLoading(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [childDbName, primaryColumn, queryParams]);
+    }, [childDbName, primaryColumn, queryParams, value]);
     useEffect(() => {
         if (childDbName) {
             fetchData();

package/dist/web/components/wd-upload-file/wd-upload-file.js

@@ -30,7 +30,7 @@ export const WdUploadFile = forwardRef(function WdUploadFile(props, ref) {
         ...trait,
         classRoot,
         readOnly: false,
-        size: 'lg',
+        size: 'md',
     };
     if (!visible)
         return null;

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

@@ -30,7 +30,7 @@ export const WdUploadImage = forwardRef(function WdUploadImage(props, ref) {
         ...trait,
         classRoot,
         readOnly: false,
-        size: 'lg',
+        size: 'md',
     };
     if (!visible)
         return null;