@cloudbase/weda-ui 3.4.2 → 3.4.4

package/dist/web/components/uploaderView/index.css

@@ -9,10 +9,10 @@
 }
 
 .g-uploader-view .g-uploader-view__image-box {
-  height: 7.14286rem;
-  width: 7.14286rem;
-  margin-right: 0.57143rem;
-  margin-bottom: 0.57143rem;
+  height: 100px;
+  width: 100px;
+  margin-right: 8px;
+  margin-bottom: 8px;
   background: #f2f2f2;
   display: flex;
   align-items: center;
@@ -20,7 +20,7 @@
 }
 
 .g-uploader-view .g-uploader-view__empty {
-  padding: 0.57143rem;
+  padding: 8px;
   background-image: url('https://main.qcloudimg.com/raw/c85c9a875e9754545ee19f20438b2caa.svg');
 }
 
@@ -29,6 +29,3 @@
   height: auto;
   max-height: 100%;
 }
-
-/*# sourceURL=webpack://./src/web/components/uploaderView/index.css */
-/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy93ZWIvY29tcG9uZW50cy91cGxvYWRlclZpZXcvaW5kZXguY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsU0FBUztFQUNULFVBQVU7QUFDWjs7QUFFQTtFQUNFLGFBQWE7RUFDYixlQUFlO0FBQ2pCOztBQUVBO0VBQ0Usa0JBQWtCO0VBQ2xCLGlCQUFpQjtFQUNqQix3QkFBd0I7RUFDeEIseUJBQXlCO0VBQ3pCLG1CQUFtQjtFQUNuQixhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLHVCQUF1QjtBQUN6Qjs7QUFFQTtFQUNFLG1CQUFtQjtFQUNuQiw0RkFBNEY7QUFDOUY7O0FBRUE7RUFDRSxXQUFXO0VBQ1gsWUFBWTtFQUNaLGdCQUFnQjtBQUNsQiIsInNvdXJjZXNDb250ZW50IjpbIi5nLXVwbG9hZGVyLXZpZXcge1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG59XG5cbi5nLXVwbG9hZGVyLXZpZXcgLmctdXBsb2FkZXItdmlld19faW1hZ2UtbGlzdCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtd3JhcDogd3JhcDtcbn1cblxuLmctdXBsb2FkZXItdmlldyAuZy11cGxvYWRlci12aWV3X19pbWFnZS1ib3gge1xuICBoZWlnaHQ6IDcuMTQyODZyZW07XG4gIHdpZHRoOiA3LjE0Mjg2cmVtO1xuICBtYXJnaW4tcmlnaHQ6IDAuNTcxNDNyZW07XG4gIG1hcmdpbi1ib3R0b206IDAuNTcxNDNyZW07XG4gIGJhY2tncm91bmQ6ICNmMmYyZjI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuXG4uZy11cGxvYWRlci12aWV3IC5nLXVwbG9hZGVyLXZpZXdfX2VtcHR5IHtcbiAgcGFkZGluZzogMC41NzE0M3JlbTtcbiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCdodHRwczovL21haW4ucWNsb3VkaW1nLmNvbS9yYXcvYzg1YzlhODc1ZTk3NTQ1NDVlZTE5ZjIwNDM4YjJjYWEuc3ZnJyk7XG59XG5cbi5nLXVwbG9hZGVyLXZpZXcgLmctdXBsb2FkZXItdmlld19faW1hZ2Uge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBhdXRvO1xuICBtYXgtaGVpZ2h0OiAxMDAlO1xufVxuIl0sInNvdXJjZVJvb3QiOiIifQ== */

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

@@ -0,0 +1,3 @@
+import { WdBubble } from './wd-bubble';
+export { WdBubble } from './wd-bubble';
+export default WdBubble;

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Bubble, ConfigProvider } from 'tea-component';
+import classNames from '../../utils/classnames';
+import { isInIde, usePlatform } from '../../utils/platform';
+export const WdBubble = ({ trigger, placement, promptTheme, arrowPointAtCenter, openDelay, closeDelay, bubbleContent, bubbleChildren, events, id, style, className, }) => {
+    const platform = usePlatform();
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: classNames('wd-bubble', className, platform === 'h5' ? 'wd-h5-bubble' : 'wd-pc-bubble'), id: id, style: style }, isInIde() ? (React.createElement(Bubble, { content: bubbleContent && (React.createElement("div", { className: 'wd-bubble-content', style: { minWidth: '140px' } }, bubbleContent)), visible: true }, bubbleChildren)) : (React.createElement(Bubble, { content: bubbleContent, error: promptTheme === 'error', dark: promptTheme === 'dark', trigger: trigger, placement: placement, arrowPointAtCenter: arrowPointAtCenter, openDelay: Number(openDelay), closeDelay: Number(closeDelay), onVisibleChange: (visible) => {
+                if (visible) {
+                    events === null || events === void 0 ? void 0 : events.open();
+                }
+                else {
+                    events === null || events === void 0 ? void 0 : events.close();
+                }
+            } },
+            React.createElement("span", { className: 'wd-bubble-child' }, bubbleChildren))))));
+};

package/dist/web/components/wd-button/convert-legacy-props.js

@@ -0,0 +1,14 @@
+const PROPS_VALUE_MAP = {
+    size: {
+        default: 'md',
+        mini: 'sm',
+        large: 'lg',
+    },
+    theme: {
+        default: 'primary',
+        warn: 'warning',
+    },
+};
+export const convertLegacyProps = (key, prop) => {
+    return PROPS_VALUE_MAP[key][prop];
+};

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

@@ -0,0 +1,3 @@
+import { WdButton } from './wd-button';
+export { WdButton } from './wd-button';
+export default WdButton;

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

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { emptyObject } from '../../utils/constant';
+import { useConfig } from '../../utils/config-context';
+import { getParentForm } from '../../utils/widget-api';
+import { convertLegacyProps } from './convert-legacy-props';
+import { textToString, usePlatform } from '../../utils/platform';
+import { convertLegacyEnum } from '../../utils/tool';
+import { WD_BUTTON_THEME, WD_BUTTON_VARIANT, WD_BUTTON_SIZE, WD_BUTTON_ICON_TYPE, WD_BUTTON_ICON_POSITION, WD_BUTTON_TYPE, } from '../../../enum';
+import { WdIcon } from '../index';
+export const WdButton = ({ text, size: _size = 'md', theme: _theme = 'secondary', variant: _variant = 'base', iconType: _iconType = 'none', iconSource = 'inner', icon: _icon, iconSrc, iconPosition: _iconPosition = 'before', block, formType: _formType, disabled, events = emptyObject, className, style, id, loading, 
+// 组件 widget 实例，后续可能会更改接口
+$node, ...props }) => {
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值
+    let size = convertLegacyProps('size', _size) || _size;
+    let theme = convertLegacyProps('theme', _theme) || _theme;
+    const icon = loading ? 'td:loading' : _icon;
+    let iconType = _iconType === 'none' && loading ? 'text-with-icon' : _iconType;
+    // 枚举转换
+    theme = convertLegacyEnum(theme, WD_BUTTON_THEME);
+    size = convertLegacyEnum(size, WD_BUTTON_SIZE);
+    iconType = convertLegacyEnum(iconType, WD_BUTTON_ICON_TYPE);
+    const variant = convertLegacyEnum(_variant, WD_BUTTON_VARIANT);
+    const iconPosition = convertLegacyEnum(_iconPosition, WD_BUTTON_ICON_POSITION);
+    const formType = convertLegacyEnum(_formType, WD_BUTTON_TYPE);
+    // 样式
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-btn`;
+    // 响应式css api
+    const platformCss = `${classPrefix}-${platform}-btn`;
+    const classes = {
+        [`${classPrefix}-btn`]: true,
+        // 颜色
+        [`${compClassName}--${theme}`]: !!theme,
+        // 类型
+        [`${compClassName}--${variant}`]: !!variant,
+        // 大小
+        [`${compClassName}--${size}`]: !!size,
+        // 禁用
+        'is-disabled': disabled,
+        // 占满
+        [`${compClassName}--block`]: block,
+        // 是否是纯图标
+        [`${compClassName}--icon`]: iconType === 'icon-only',
+        [platformCss]: true,
+    };
+    // 方法
+    const onClick = (e) => {
+        var _a;
+        let parentForm;
+        switch (formType) {
+            case 'submit':
+                // 调用父级表单容器的提交
+                parentForm = getParentForm($node);
+                parentForm === null || parentForm === void 0 ? void 0 : parentForm.submit();
+                break;
+            case 'reset':
+                // 调用父级表单容器的重置
+                parentForm = getParentForm($node);
+                parentForm === null || parentForm === void 0 ? void 0 : parentForm.reset();
+                break;
+            default:
+                (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e });
+        }
+    };
+    const propsStartWithOn = React.useMemo(() => {
+        return Object.keys(props).reduce((acc, cur) => {
+            if (cur.startsWith('on')) {
+                acc[cur] = props[cur];
+            }
+            return acc;
+        }, {});
+    }, [props]);
+    const Icon = () => {
+        // icon样式
+        const iconCls = classNames({
+            [`${classPrefix}-btn__icon`]: true,
+            [`${classPrefix}-btn__before-icon`]: iconType === 'text-with-icon' && _iconPosition === 'before',
+            [`${classPrefix}-btn__after-icon`]: iconType === 'text-with-icon' && _iconPosition === 'after',
+            [`${classPrefix}-icon--inherit`]: (style === null || style === void 0 ? void 0 : style.fontSize) && iconSource === 'inner',
+        });
+        return icon || iconSrc ? (React.createElement(WdIcon, { className: iconCls, size: 'sm', name: icon, src: iconSrc, type: iconSource })) : null;
+    };
+    return (React.createElement("button", { className: classNames(classes, className), disabled: disabled, type: formType, style: style, id: id, ...propsStartWithOn, onClick: onClick },
+        iconPosition === 'before' && iconType === 'text-with-icon' && React.createElement(Icon, null),
+        iconType === 'icon-only' ? (React.createElement(Icon, null)) : (React.createElement("span", { className: `${classPrefix}-btn__text` }, textToString(text))),
+        iconPosition === 'after' && iconType === 'text-with-icon' && React.createElement(Icon, null)));
+};

package/dist/web/components/wd-config-provider/index.js

@@ -0,0 +1 @@
+export { ConfigProvider } from './wd-config-provider';

package/dist/web/components/wd-config-provider/wd-config-context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+export const DEFAULT_CLASS_PREFIX = typeof WD_CLASS_PREFIX !== 'undefined' ? WD_CLASS_PREFIX : 'wd';
+export const WdConfigContext = createContext({
+    classPrefix: DEFAULT_CLASS_PREFIX,
+});

package/dist/web/components/wd-config-provider/wd-config-provider.js

@@ -0,0 +1,12 @@
+import React, { useEffect } from 'react';
+import { WdConfigContext } from './wd-config-context';
+const configStore = {};
+export function ConfigProvider({ children, ...configProps }) {
+    useEffect(() => {
+        Object.assign(configStore, { ...configProps, ...configStore });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [configProps.classPrefix]);
+    // props 优先级高于全局配置
+    const config = Object.assign({}, configStore, configProps);
+    return (React.createElement(WdConfigContext.Provider, { value: config }, children));
+}

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

@@ -0,0 +1,3 @@
+import { WdDivider } from './wd-divider';
+export { WdDivider } from './wd-divider';
+export default WdDivider;

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { convertLegacyEnum } from '../../utils/tool';
+import { WD_DIVIDER_TYPE } from '../../../enum';
+export const WdDivider = ({ className, style, id, type: _type = 'solid', 
+// diriction = 'horizontal',
+...props }) => {
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-divider`;
+    // 枚举转换
+    const type = convertLegacyEnum(_type, WD_DIVIDER_TYPE);
+    // 类名
+    const classList = [compClassName];
+    type && classList.push(`${compClassName}--${type}`);
+    // diriction && classList.push(`${btnClassName}-${diriction}`);
+    // 用户定义的className
+    classList.push(className);
+    if (platform === 'h5') {
+        classList.push('wd-h5-divider');
+    }
+    else {
+        classList.push('wd-pc-divider');
+    }
+    return (React.createElement("div", { "data-testid": "wd-divider-test", className: classNames(...classList), style: style, id: id, ...props }));
+};

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

@@ -0,0 +1,14 @@
+const PROPS_VALUE_MAP = {
+    size: {
+        default: 'md',
+        mini: 'sm',
+        large: 'lg',
+    },
+    theme: {
+        default: 'primary',
+        warn: 'warning',
+    },
+};
+export const convertLegacyProps = (key, prop) => {
+    return PROPS_VALUE_MAP[key][prop];
+};

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

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

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

@@ -0,0 +1,63 @@
+import * as React 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';
+export const WdIcon = ({ type: _type = 'inner', name, src, size: _size, events = emptyObject, className, style: _style, id, color: _color, ...props }) => {
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值 size/color
+    const remdiff = 2;
+    const iconNumSize = !isNaN(Number(_size))
+        ? `${Number(_size) / remdiff}px`
+        : '';
+    const fontSize = iconNumSize && _type === 'inner' ? { fontSize: iconNumSize } : {};
+    const width = iconNumSize && _type === 'custom' ? { width: iconNumSize } : {};
+    const height = iconNumSize && _type === 'custom' ? { height: iconNumSize } : {};
+    const color = _color ? { color: _color } : {};
+    const style = { ...fontSize, ...width, ...height, ...color, ..._style };
+    // 枚举转换
+    const type = convertLegacyEnum(_type, WD_ICON_TYPE);
+    const size = convertLegacyEnum(_size, WD_ICON_SIZE);
+    // 样式
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-icon`;
+    const isTdIcon = /td/.test(name) && type === 'inner';
+    const isLegacyIcon = !isTdIcon && type === 'inner';
+    const iconName = name === null || name === void 0 ? void 0 : name.split(':')[1];
+    // 响应式css api
+    const platformCss = `${classPrefix}-${platform}-icon`;
+    const classes = {
+        [`${classPrefix}-icon`]: true,
+        // 旧版图标
+        'wd-lcap-icon': isLegacyIcon,
+        [`wd-lcap-icon-${name}`]: isLegacyIcon && name,
+        // TDesign 图标
+        't-icon': isTdIcon,
+        [`t-icon-${iconName}`]: isTdIcon && iconName,
+        // 尺寸
+        [`${compClassName}--${size}`]: !!size,
+        [platformCss]: true,
+    };
+    const onClick = (e) => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e });
+    };
+    const propsStartWithOn = React.useMemo(() => {
+        return Object.keys(props).reduce((acc, cur) => {
+            if (cur.startsWith('on') || cur === 'data-testid') {
+                acc[cur] = props[cur];
+            }
+            return acc;
+        }, {});
+    }, [props]);
+    if (type === 'inner') {
+        return (React.createElement("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
+                ? src
+                : 'https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg', onClick: onClick, ...propsStartWithOn }));
+    }
+};

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

@@ -0,0 +1,171 @@
+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';
+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, }) {
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const [imgShow, setImgShow] = React.useState(false);
+    const imagePreviewRef = useRef();
+    const onMaskClick = () => {
+        if (maskClosable) {
+            setImgShow(false);
+        }
+    };
+    const [showHeight, setShowHeight] = React.useState(0);
+    const [showWidth, setShowWidth] = React.useState(0);
+    const realWidth = React.useRef(0);
+    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();
+            // eslint-disable-next-line react/no-find-dom-node
+            const component = findDOMNode(imagePreviewRef.current);
+            if (component && event.target === component) {
+                return;
+            }
+        },
+        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 (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>
+            )));
+    }
+    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>
+            )));
+    }
+}

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useState, useMemo } from 'react';
+import classNames from '../../utils/classnames';
+import { ImageInner } from './image';
+import { emptyObject } from '../../utils/constant';
+import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
+import { useConfig } from '../../utils/config-context';
+export default function Image({ 
+// 系统属性
+className, events = emptyObject, style, 
+// 组件属性
+src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }) {
+    const [isError, setIsError] = useState(false);
+    const { classPrefix } = useConfig();
+    const cls = classNames({
+        [`${classPrefix}-image`]: true,
+        [`${classPrefix}-image__error`]: isError,
+        [className]: className,
+    });
+    const objectFit = fit || getObjectFitByWxImageMode(mode);
+    const { data: realSrc } = useTempUrl(src);
+    /**
+     * 模拟小程序的widthFix、heightFix模式
+     */
+    const realFit = useMemo(() => {
+        if (objectFit === 'widthFix' || objectFit === 'heightFix') {
+            return 'unset';
+        }
+        else {
+            return objectFit;
+        }
+    }, [objectFit]);
+    const realStyle = useMemo(() => {
+        if (isError) {
+            return style;
+        }
+        else {
+            if (objectFit === 'widthFix') {
+                return {
+                    ...style,
+                    height: 'auto',
+                };
+            }
+            else if (objectFit === 'heightFix') {
+                return {
+                    ...style,
+                    width: 'auto',
+                };
+            }
+            else {
+                return style;
+            }
+        }
+    }, [style, objectFit, isError]);
+    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;
+}
+function getObjectFitByWxImageMode(mode) {
+    const array = [
+        {
+            mode: 'scaleToFill',
+            h5: 'fill',
+        },
+        {
+            mode: 'aspectFit',
+            h5: 'contain',
+        },
+        {
+            mode: 'aspectFill',
+            h5: 'cover',
+        },
+        {
+            mode: 'widthFix',
+            h5: 'cover',
+        },
+        {
+            mode: 'heightFix',
+            h5: 'contain',
+        },
+    ];
+    const item = array.find((item) => item.mode === mode);
+    return item === null || item === void 0 ? void 0 : item.h5;
+}

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

@@ -0,0 +1,3 @@
+import { WdLink } from './wd-link';
+export { WdLink } from './wd-link';
+export default WdLink;