@cloudbase/weda-ui 3.5.3 → 3.6.0

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

@@ -3,13 +3,16 @@
 */
 
 .wd-form-title__text.wd-h5-typography {
-  padding-left: 16px;
+  margin-left: 16px;
+  margin-right: 16px;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 .wd-pc-form .wd-form-title {
   padding-top: 24px;
   padding-bottom: 12px;
-  margin-bottom: var(--wd-form-item-mb);
+  margin-bottom: calc(var(--wd-form-item-mb) * 0.5);
 }
 
 .wd-h5-form .wd-form-title {

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-form';
 import './style';
-export declare const WdForm: ({ className, layout, labelPosition, children, ...rest }: WdFormProps) => JSX.Element;
-export type WdFormProps = CommonPropsType & {
-    labelPosition?: string;
-    layout?: string;
+export declare const WdForm: ({ className, lgWidth, labelPosition, children, ...rest }: WdFormProps) => JSX.Element;
+export type WdFormProps = CommonPropsType & Pick<DataType, 'layout' | 'lgWidth'> & {
+    labelPosition: 'horizontal-left' | 'vertical-left' | 'horizontal-right' | 'vertical-right';
 };

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

@@ -3,7 +3,9 @@ import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
 import { usePlatform } from '../../utils/platform';
 import './style';
-export const WdForm = ({ className, layout, labelPosition, children, ...rest }) => {
+export const WdForm = ({ className, 
+// layout,
+lgWidth = 'hundred', labelPosition, children, ...rest }) => {
     const platform = usePlatform();
     // 兼容旧版组件的属性值
     const { classPrefix } = useConfig();
@@ -15,11 +17,17 @@ export const WdForm = ({ className, layout, labelPosition, children, ...rest })
     // weui添加className
     ['weui'].includes(formType) && classList.push(`${classPrefix}-form--weui `);
     platform === 'h5' && classList.push(`${classPrefix}-form--weui `);
-    layout === 'inline' && classList.push(`${classPrefix}-form--inline `);
+    // layout === 'inline' && classList.push(`${classPrefix}-form--inline `);
+    if (platform === 'pc' && lgWidth) {
+        classList.push(`size-width-${lgWidth}`);
+    }
     switch (labelPosition) {
         case 'horizontal-right':
             classList.push(`${classPrefix}-form--horizontal-right`);
             break;
+        case 'horizontal-left':
+            classList.push(`${classPrefix}-form--horizontal-left`);
+            break;
         case 'vertical-left':
             classList.push(`${classPrefix}-form--vertical-left`);
             break;

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

@@ -1,4 +1,3 @@
-/// <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;

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

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

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

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

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

@@ -0,0 +1,14 @@
+interface IWdFormItemReadOnly {
+    version?: string;
+    readOnly?: boolean;
+    readValue?: any;
+    children?: any;
+    before?: any;
+    after?: any;
+    readBeforeAfter?: boolean;
+}
+/**
+ * 只读展示，参数 props 覆盖 Context
+ */
+export declare function WdFormItemReadOnly(props: IWdFormItemReadOnly): any;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform, textToString } from '../../utils/platform';
+import { useRecycle } from '../../utils/hooks/useRecycle';
+/**
+ * 只读展示，参数 props 覆盖 Context
+ */
+export function WdFormItemReadOnly(props) {
+    const ctx = useRecycle();
+    const { readValue, readOnly, version, readBeforeAfter, before, after } = Object.assign({}, ctx, props);
+    const platform = usePlatform();
+    const { classPrefix } = useConfig();
+    const item = `${classPrefix}-form-item`;
+    const cls = `${item}__readonly${platform !== 'h5' ? '-web' : ''}`;
+    const _readValue = useMemo(() => textToString(readValue), [readValue]);
+    const _before = useMemo(() => readBeforeAfter && textToString(before), [before, readBeforeAfter]);
+    const _after = useMemo(() => readBeforeAfter && textToString(after), [after, readBeforeAfter]);
+    return readOnly && version === 'wd' ? (_jsxs("div", { className: cls, children: [_before && _jsx("span", { className: `${item}__readonly-before`, children: _before }), _jsx("span", { className: `${item}__readonly-value`, children: _readValue }), _after && _jsx("span", { className: `${item}__readonly-after`, children: _after })] })) : (props.children);
+}

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

@@ -3,37 +3,44 @@ import classNames from '../../utils/classnames';
 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, useBlock, } from '../../utils/hooks/useFormLegacy';
+import { WdFormItemReadOnly } from './wd-form-item-read-only';
+import { usePlatform, textToString } from '../../utils/platform';
+import { useLabelAlign, useLayout, useSize, convertPx, convertIconSize, } from '../../utils/hooks/useFormLegacy';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
 /**
  * 表单项包裹，包括标题、文本提示、校验
  */
 export function WdFormItem(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 { id, className, style, label, labelVisible = X_RUNTIME_DEFAULT.labelVisible, labelTips = X_RUNTIME_DEFAULT.labelTips, labelWidth: _labelWidth = X_RUNTIME_DEFAULT.labelWidth, labelWrap = X_RUNTIME_DEFAULT.labelWrap, extra = X_RUNTIME_DEFAULT.extra, required = X_RUNTIME_DEFAULT.required, readOnly, children, testId, requiredFlag = X_RUNTIME_DEFAULT.requiredFlag, validateState, validateErrorMsg, readValue, borderedH5 = X_RUNTIME_DEFAULT.borderedH5, borderedPc = X_RUNTIME_DEFAULT.borderedPc, classRoot, controlAlign, inputId, isWdFormDetail, before, after, readBeforeAfter = true, visible = true, } = props;
     const { classPrefix } = useConfig();
     const platform = usePlatform();
     const labelAlign = useLabelAlign(props);
     const layout = useLayout(props);
     const labelWidth = convertPx(_labelWidth);
     const labelStyle = labelWidth ? { width: labelWidth } : {};
-    const _size = useSize(props);
-    const size = _size === 'xs' ? 'xs' : platform === 'h5' ? 'lg' : _size;
-    const block = useBlock(props);
+    const size = useSize(props);
+    const iconSize = convertIconSize(size);
+    const heightSize = size === 'xs' ? 'xs' : platform === 'h5' ? 'lg' : size;
+    const widthSize = size === 'xs' ? 'lg' : size; // xs 没有宽度值，用 lg 来替代
     // 样式前缀定义
     const root = `${classPrefix}-${classRoot}`;
     const item = `${classPrefix}-form-item`;
+    const itemLayout = isWdFormDetail
+        ? `${classPrefix}-form-item--detail`
+        : `${item}-`;
     const itemWrap = `${classPrefix}-form-item-wrap`;
     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,
+    const cls = classNames(item, className, `${classPrefix}-${platform}-form-item`, `${root}-root`, `${classPrefix}-${platform}-${classRoot}-root`, `item-size-height-${heightSize}`, `${itemLayout}-layout-${layout}`, `${item}--label-${labelAlign}`, {
+        [`size-width-${widthSize}`]: !!widthSize && platform === 'pc',
+        'size-width-hundred': true,
         'is-required': requiredFlag && required,
         'is-borderless': platform === 'h5' ? !borderedH5 : !borderedPc,
         [`${item}--weui`]: platform === 'h5',
-        [`${item}--horizontal-left`]: layout === 'horizontal' && labelAlign === 'left',
-        [`${item}--horizontal-right`]: layout === 'horizontal' && labelAlign === 'right',
-        [`${item}--vertical-left`]: layout === 'vertical' && labelAlign === 'left',
-        [`${item}--vertical-right`]: layout === 'vertical' && labelAlign === 'right',
+        [`${itemLayout}-horizontal-left`]: layout === 'horizontal' && labelAlign === 'left',
+        [`${itemLayout}-horizontal-right`]: layout === 'horizontal' && labelAlign === 'right',
+        [`${itemLayout}-vertical-left`]: layout === 'vertical' && labelAlign === 'left',
+        [`${itemLayout}-vertical-right`]: layout === 'vertical' && labelAlign === 'right',
     });
     const labelCls = classNames(`${itemWrap}__label`, labelRoot, {
         'is-nowrap': !labelWrap,
@@ -42,16 +49,18 @@ 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${platform !== 'h5' ? '-web' : ''}`, children: readValue })) : (children) }) }));
+    const Item = (_jsx("div", { className: `${itemWrap}__control`, "data-testid": testId, children: _jsx("div", { className: controlWrapCls, children: _jsx(WdFormItemReadOnly, { readOnly: readOnly, readValue: readValue, version: "wd", before: before, after: after, readBeforeAfter: readBeforeAfter, children: 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" }) }))] }) }));
+    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: textToString(label) }), labelTips && (_jsx("span", { className: `${itemWrap}__label-explain`, children: _jsx(WdBubble, { style: { display: 'inline' }, bubbleChildren: _jsx(WdIcon, { name: "td:help-circle", size: iconSize }), bubbleContent: textToString(labelTips), promptTheme: "dark" }) }))] }) }));
     // 下方空白替代(改为距左对齐)
     // const LabelSpace = labelVisible && layout === 'horizontal' && (
     //   <div className={labelCls} style={labelStyle}></div>
     // );
     // 下方提示部分
-    const Help = extra && (_jsx("p", { className: `${item}__help`, children: _jsx("span", { className: `${item}__help-text ${root}__help`, children: extra }) }));
+    const Help = extra && (_jsx("p", { className: `${item}__help`, children: _jsx("span", { className: `${item}__help-text ${root}__help`, children: textToString(extra) }) }));
     // 校验提示文字部分
-    const Message = validateErrorMsg && (_jsx("p", { className: `${item}__help`, children: _jsx("span", { className: `${classPrefix}-g-text-${validateState} ${root}__error`, children: validateErrorMsg }) }));
+    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: id, style: style, children: [_jsxs("div", { className: itemWrap, children: [Label, Item] }), Message, Help] }));
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { WdInputGroupProps } from '../../../configs/type-utils/type-form';
 /**
  * 输入类组件包裹，添加前后文字

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

@@ -1,25 +1,24 @@
 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, useBlock, useStringProp, } from '../../utils/hooks/useFormLegacy';
+import { useSize, useStringProp } from '../../utils/hooks/useFormLegacy';
 /**
  * 输入类组件包裹，添加前后文字
  */
 export const WdInputGroup = (props) => {
-    const { children, classRoot = '' } = props;
+    const { children, classRoot = '', readOnly } = 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}`, {
-        'size-width-hundred': block,
+        'size-width-hundred': true,
     });
     const beforeCls = `${inputGroup}__addon ${inputGroup}__addon-left ${root}__text-before`;
     const afterCls = `${inputGroup}__addon ${inputGroup}__addon-right ${root}__text-after`;
     const contentCls = `${inputGroup}__content`;
-    if (before || after) {
+    if (!readOnly && (before || after)) {
         return (_jsxs("div", { className: inputGroupCls, children: [before && _jsx("div", { className: beforeCls, children: before }), _jsx("div", { className: contentCls, children: children }), after && _jsx("div", { className: afterCls, children: after })] }));
     }
     return _jsx(_Fragment, { children: children });

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { WdInputWrapProps } from '../../../configs/type-utils/type-form';
 /**
  * 输入类(input)组件包裹

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

@@ -1,22 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, 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 { useSize, convertIconSize } from '../../utils/hooks/useFormLegacy';
 import { WdIcon } from '../wd-icon';
 import { noop } from '../../utils/constant';
 import { filterPropsWithOn } from '../../utils/tool';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
 /**
  * 输入类(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 { children, classRoot = '', wrapClassName, before = X_RUNTIME_DEFAULT.before, after = X_RUNTIME_DEFAULT.after, disabled, prefixType, prefixIcon, prefixSrc = X_RUNTIME_DEFAULT.prefixSrc, suffixType, suffixIcon, suffixSrc = X_RUNTIME_DEFAULT.suffixSrc, readOnly, hasClearIcon = false, 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 iconSize = convertIconSize(size);
     const root = `${classPrefix}-${classRoot}`;
     const inputWrap = `${classPrefix}-form-input-wrap`;
     const contentCls = `${inputWrap}__content`;
@@ -24,8 +23,8 @@ export const WdInputWrap = (props) => {
     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,
+    const cls = classNames(inputWrap, wrapClassName, `size-width-${size} size-font-${size}`, `${root}-${classRoot}`, `size-height-${size}`, `${classPrefix}-form-inherit--font`, {
+        'size-width-hundred': true,
         'is-disabled': disabled,
         [`${inputWrap}--no-radius-left`]: before,
         [`${inputWrap}--no-radius-right`]: after,
@@ -34,5 +33,7 @@ export const WdInputWrap = (props) => {
     const propsStartWithOn = useMemo(() => {
         return filterPropsWithOn(rest);
     }, [rest]);
+    if (readOnly)
+        return _jsx(_Fragment, { children: children });
     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/useLoadCss.d.ts

@@ -0,0 +1 @@
+export declare function useLoadCss(): boolean;

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

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import cfg from '../../../iconConfig.json';
+import { getUrlPath } from '../../utils/tool';
+// 加载样式，失败抛出错误
+function loadLink(url, className) {
+    return new Promise((resolve, reject) => {
+        if (!document || !url || typeof url !== 'string') {
+            reject();
+        }
+        else if (document.querySelectorAll('.'.concat(className, '[href="').concat(url, '"]')).length > 0) {
+            resolve(true);
+        }
+        else {
+            const l = document.createElement('link');
+            l.setAttribute('class', className);
+            l.setAttribute('href', url);
+            l.setAttribute('rel', 'stylesheet');
+            document.head.appendChild(l);
+            l.addEventListener('load', () => resolve(true));
+            l.addEventListener('error', () => reject());
+        }
+    });
+}
+export function useLoadCss() {
+    const [isLoad, setIsLoad] = useState(false);
+    useEffect(() => {
+        loadLink(getUrlPath(cfg.path, cfg.cssFile), 'wd-load-remote-icon')
+            .then(() => setIsLoad(true))
+            .catch();
+    }, []);
+    return isLoad;
+}

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

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import classNames from '../../utils/classnames';
 import { emptyObject } from '../../utils/constant';
 import { useConfig } from '../../utils/config-context';
 import { usePlatform } from '../../utils/platform';
 import { convertLegacyEnum } from '../../utils/tool';
 import { WD_ICON_TYPE, WD_ICON_SIZE } from '../../../enum';
+import WdImage from '../wd-image';
+import { useLoadCss } from './useLoadCss';
 import '../style';
-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);
+export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name = 'success', src, size: _size = 'md', sizeSelfAdaptive: _sizeSelfAdaptive = false, events = emptyObject, className, style: _style, id, color: _color, ...props }, ref) {
+    useLoadCss(); // 加载远程样式
     const platform = usePlatform();
     // 兼容旧版组件的属性值 size/color
     const remdiff = 2;
@@ -31,7 +33,6 @@ export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name =
     const isTdIcon = /td/.test(name) && type === 'inner';
     const isLegacyIcon = !isTdIcon && type === 'inner';
     const iconName = name === null || name === void 0 ? void 0 : name.split(':')[1];
-    const showErrorIcon = isError && type === 'custom';
     // 响应式css api
     const platformCss = `${classPrefix}-${platform}-icon`;
     const classes = {
@@ -45,7 +46,9 @@ export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name =
         // 尺寸
         [`${compClassName}--${size}`]: !!size,
         [platformCss]: true,
-        [`${classPrefix}-icon-error`]: showErrorIcon,
+        'size-self-adaptive': _sizeSelfAdaptive,
+        [`wd-icon--${type}`]: true,
+        [`wd-icon--${type}--${size}`]: true,
     };
     const onClick = (e) => {
         var _a;
@@ -72,12 +75,8 @@ export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name =
         return (_jsx("i", { className: classNames(classes, className), style: style, id: id, onClick: onClick, ...propsStartWithOn }));
     }
     else {
-        return (_jsx("img", { className: classNames(classes, className), style: style, id: id, src: src
-                ? src
-                : 'https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg', onLoad: () => {
-                setIsError(false);
-            }, onError: () => {
-                setIsError(true);
-            }, onClick: onClick, ...propsStartWithOn }));
+        return (_jsx("div", { "data-testid": propsStartWithOn['data-testid'], style: { display: 'inherit' }, children: _jsx(WdImage, { className: classNames(classes, className), style: style, id: id, src: src
+                    ? src
+                    : 'https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg', events: { tap: onClick }, maskClosable: false, alt: '', lazyLoad: false, ...propsStartWithOn }) }));
     }
 });

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

@@ -1,20 +1,19 @@
 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 { useGesture } from '@use-gesture/react';
 import { useConfig } from '../../utils/config-context';
 import { useRef } from 'react';
-import { findDOMNode } from 'react-dom';
+import { Portal } from '../common/portal';
 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, id, isStopPropagation, }) {
+    var _a;
     const { classPrefix } = useConfig();
     const platform = usePlatform();
     const [imgShow, setImgShow] = React.useState(false);
-    const imagePreviewRef = useRef();
     const onMaskClick = (e) => {
         if (isStopPropagation) {
             e.stopPropagation();
@@ -23,6 +22,7 @@ export function ImageInner({ objectFit, style, className, alt, src, isError, set
             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);
     const realWidth = React.useRef(0);
@@ -46,10 +46,8 @@ export function ImageInner({ objectFit, style, className, alt, src, isError, set
         onClick: ({ event }) => {
             // 防止冒泡出发关闭预览
             event.stopPropagation();
-            // eslint-disable-next-line react/no-find-dom-node
-            const component = findDOMNode(imagePreviewRef.current);
-            if (component && event.target === component) {
-                return;
+            if (maskClosable) {
+                setImgShow(false);
             }
         },
         onPinch: ({ offset }) => {
@@ -76,7 +74,7 @@ export function ImageInner({ objectFit, style, className, alt, src, isError, set
         },
     });
     if (platform === 'h5' || !imgPreview || isError) {
-        return (_jsxs(_Fragment, { children: [_jsx("img", { id: id, style: {
+        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) => {
@@ -109,23 +107,23 @@ export function ImageInner({ objectFit, style, className, alt, src, isError, set
                             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,
-                                } })] }) }))] }));
+                    }, 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", { id: id, style: {
+        return (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "wd-image", id: id, style: {
                         objectFit,
                         cursor: 'zoom-in',
                         ...style,
@@ -156,18 +154,18 @@ export function ImageInner({ objectFit, style, className, alt, src, isError, set
                             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,
-                                } })] }) }))] }));
+                    } }), 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,
+                                    } })] }) }) }))] }));
     }
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useState, useMemo, } from 'react';
+import { forwardRef, useImperativeHandle, useState, useMemo, useEffect, } from 'react';
 import classNames from '../../utils/classnames';
 import { ImageInner } from './image';
 import { emptyObject } from '../../utils/constant';
@@ -19,7 +19,7 @@ src, alt, mode, lazyLoad = false, imgPreview = false, maskClosable = true, fit,
         [className]: className,
     });
     const objectFit = fit || getObjectFitByWxImageMode(mode);
-    const { data: realSrc } = useTempUrl(src);
+    const { data: realSrc, isLoading } = useTempUrl(src);
     /**
      * 模拟小程序的widthFix、heightFix模式
      */
@@ -61,7 +61,22 @@ src, alt, mode, lazyLoad = false, imgPreview = false, maskClosable = true, fit,
             alt,
         };
     }, [fit, src, alt]);
-    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 })) : (_jsx("div", { className: classNames(cls, `${classPrefix}-image__error`) }));
+    useEffect(() => {
+        // 图片地址不存在的时候，src设置为null不会发送请求，不触发onerror事件，需手动设置error状态
+        const isError = !isLoading && !realSrc;
+        setIsError(isError);
+    }, [isLoading, realSrc]);
+    /**
+     * 图片加载失败有以下情况
+     *    1. error (解析请求失败)
+     *    2. data undefined  src cloud:// 开头 (解析cloud地址失败)
+     *    3. 图片展示失败
+     *
+     * 这几种情况最终得到realSrc均为undefined，统一走图片解析失败自行展示失败状态
+     *
+     *    4. 图片src未传，传入undefined，不展示占位符
+     */
+    return isLoading || (!isLoading && src === undefined) ? null : (_jsx(ImageInner, { objectFit: realFit, style: realStyle, className: cls, alt: alt, src: realSrc || null, isError: isError, setIsError: setIsError, events: events, lazyLoad: lazyLoad, imgPreview: imgPreview, maskClosable: maskClosable, id: id, isStopPropagation: isStopPropagation }));
 });
 function getObjectFitByWxImageMode(mode) {
     const array = [