@cloudbase/weda-ui 3.4.4 → 3.4.6

package/dist/web/components/lottery/index.js

@@ -255,137 +255,136 @@ export default React.forwardRef(function Lottery({ className, id, style, prizeLi
         },
     ];
     return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
-        React.createElement("div", { className: "body", key: "lottery", "data-testid": "lottery" },
-            React.createElement("div", { className: cls, id: id, style: style },
-                React.createElement("div", { className: `${CLASS_PREFIX}__wrap` },
-                    dotList.map((dot, index) => {
-                        return (React.createElement("div", { key: index },
-                            dot.single && (React.createElement("div", { key: `${dot.direction}-${index}`, className: classNames(`${CLASS_PREFIX}__dot-single`, `${CLASS_PREFIX}__dot-${dot.position}`), style: {
-                                    width: `${(9 * widthRatio) / 14}rem`,
-                                    height: `${(9 * heightRatio) / 14}rem`,
-                                    top: `${dot.position}` === 'left-top' ||
-                                        `${dot.position}` === 'right-top'
-                                        ? `${(9 * heightRatio) / 14}rem`
-                                        : '',
-                                    bottom: `${dot.position}` === 'left-bottom' ||
-                                        `${dot.position}` === 'right-bottom'
-                                        ? `${(9 * heightRatio) / 14}rem`
-                                        : '',
-                                    left: `${dot.position}` === 'left-top' ||
-                                        `${dot.position}` === 'left-bottom'
-                                        ? `${(6 * widthRatio) / 14}rem`
+        React.createElement("div", { className: cls, id: id, style: style, "data-testid": "lottery" },
+            React.createElement("div", { className: `${CLASS_PREFIX}__wrap` },
+                dotList.map((dot, index) => {
+                    return (React.createElement("div", { key: index },
+                        dot.single && (React.createElement("div", { key: `${dot.direction}-${index}`, className: classNames(`${CLASS_PREFIX}__dot-single`, `${CLASS_PREFIX}__dot-${dot.position}`), style: {
+                                width: `${(9 * widthRatio) / 14}rem`,
+                                height: `${(9 * heightRatio) / 14}rem`,
+                                top: `${dot.position}` === 'left-top' ||
+                                    `${dot.position}` === 'right-top'
+                                    ? `${(9 * heightRatio) / 14}rem`
+                                    : '',
+                                bottom: `${dot.position}` === 'left-bottom' ||
+                                    `${dot.position}` === 'right-bottom'
+                                    ? `${(9 * heightRatio) / 14}rem`
+                                    : '',
+                                left: `${dot.position}` === 'left-top' ||
+                                    `${dot.position}` === 'left-bottom'
+                                    ? `${(6 * widthRatio) / 14}rem`
+                                    : '',
+                                right: `${dot.position}` === 'right-top' ||
+                                    `${dot.position}` === 'right-bottom'
+                                    ? `${(6 * widthRatio) / 14}rem`
+                                    : '',
+                            } })),
+                        !dot.single && (React.createElement("div", { key: `${dot.direction}-${index}`, className: `${CLASS_PREFIX}__dot-${dot.position}`, style: {
+                                left: `${dot.position}` === 'top' ||
+                                    `${dot.position}` === 'bottom'
+                                    ? `calc((${'100%'} - ${dotWidth}rem) / 2)`
+                                    : `${dot.position}` === 'left'
+                                        ? `${(widthRatio * 18 - widthRatio * 9) / 2 / 14}rem`
                                         : '',
-                                    right: `${dot.position}` === 'right-top' ||
-                                        `${dot.position}` === 'right-bottom'
-                                        ? `${(6 * widthRatio) / 14}rem`
+                                top: `${dot.position}` === 'left' ||
+                                    `${dot.position}` === 'right'
+                                    ? `calc((100% - ${dotHeight}rem) / 2)`
+                                    : `${dot.position}` === 'top'
+                                        ? `${(heightRatio * 18 - heightRatio * 9) / 2 / 14}rem`
                                         : '',
-                                } })),
-                            !dot.single && (React.createElement("div", { key: `${dot.direction}-${index}`, className: `${CLASS_PREFIX}__dot-${dot.position}`, style: {
-                                    left: `${dot.position}` === 'top' ||
-                                        `${dot.position}` === 'bottom'
-                                        ? `calc((${'100%'} - ${dotWidth}rem) / 2)`
-                                        : `${dot.position}` === 'left'
-                                            ? `${(widthRatio * 18 - widthRatio * 9) / 2 / 14}rem`
+                                bottom: `${dot.position}` === 'bottom'
+                                    ? `${(heightRatio * 18 - heightRatio * 9) / 2 / 14}rem`
+                                    : '',
+                                right: `${dot.position}` === 'right'
+                                    ? `${(widthRatio * 18 - widthRatio * 9) / 2 / 14}rem`
+                                    : '',
+                            } }, true && renderDot(dot.direction, dot.list)))));
+                }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__inner`, style: {
+                        paddingTop: `${(18 * heightRatio) / 14}rem`,
+                        paddingBottom: `${(18 * heightRatio) / 14}rem`,
+                        paddingLeft: `${(18 * widthRatio) / 14}rem`,
+                        paddingRight: `${(18 * widthRatio) / 14}rem`,
+                    } },
+                    React.createElement("div", { className: `${CLASS_PREFIX}__inner-wrap` },
+                        React.createElement("ul", { className: `${CLASS_PREFIX}__list` }, lotteryList.map((item, index) => {
+                            return (React.createElement("li", { "data-testid": "lottery-item", key: index, className: classNames(`${CLASS_PREFIX}__turntable-item`, item.idx === activedId ? 'is-actived' : '', item.selected ? 'is-selected' : ''), style: {
+                                    width: `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3)`,
+                                    height: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3)`,
+                                    top: `${index}` == '0' ||
+                                        `${index}` == '1' ||
+                                        `${index}` == '2'
+                                        ? `${(heightRatio * 8) / 14}rem`
+                                        : `${index}` == '3'
+                                            ? `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`
                                             : '',
-                                    top: `${dot.position}` === 'left' ||
-                                        `${dot.position}` === 'right'
-                                        ? `calc((100% - ${dotHeight}rem) / 2)`
-                                        : `${dot.position}` === 'top'
-                                            ? `${(heightRatio * 18 - heightRatio * 9) / 2 / 14}rem`
+                                    bottom: `${index}` == '4' ||
+                                        `${index}` == '5' ||
+                                        `${index}` == '6'
+                                        ? `${(heightRatio * 8) / 14}rem`
+                                        : `${index}` == '7'
+                                            ? `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`
                                             : '',
-                                    bottom: `${dot.position}` === 'bottom'
-                                        ? `${(heightRatio * 18 - heightRatio * 9) / 2 / 14}rem`
+                                    right: `${index}` == '2' ||
+                                        `${index}` == '3' ||
+                                        `${index}` == '4'
+                                        ? `${(widthRatio * 8) / 14}rem`
                                         : '',
-                                    right: `${dot.position}` === 'right'
-                                        ? `${(widthRatio * 18 - widthRatio * 9) / 2 / 14}rem`
-                                        : '',
-                                } }, true && renderDot(dot.direction, dot.list)))));
-                    }),
-                    React.createElement("div", { className: `${CLASS_PREFIX}__inner`, style: {
-                            paddingTop: `${(18 * heightRatio) / 14}rem`,
-                            paddingBottom: `${(18 * heightRatio) / 14}rem`,
-                            paddingLeft: `${(18 * widthRatio) / 14}rem`,
-                            paddingRight: `${(18 * widthRatio) / 14}rem`,
-                        } },
-                        React.createElement("div", { className: `${CLASS_PREFIX}__inner-wrap` },
-                            React.createElement("ul", { className: `${CLASS_PREFIX}__list` }, lotteryList.map((item, index) => {
-                                return (React.createElement("li", { "data-testid": "lottery-item", key: index, className: classNames(`${CLASS_PREFIX}__turntable-item`, item.idx === activedId ? 'is-actived' : '', item.selected ? 'is-selected' : ''), style: {
-                                        width: `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3)`,
-                                        height: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3)`,
-                                        top: `${index}` == '0' ||
-                                            `${index}` == '1' ||
-                                            `${index}` == '2'
-                                            ? `${(heightRatio * 8) / 14}rem`
-                                            : `${index}` == '3'
-                                                ? `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`
-                                                : '',
-                                        bottom: `${index}` == '4' ||
-                                            `${index}` == '5' ||
-                                            `${index}` == '6'
-                                            ? `${(heightRatio * 8) / 14}rem`
-                                            : `${index}` == '7'
-                                                ? `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`
-                                                : '',
-                                        right: `${index}` == '2' ||
-                                            `${index}` == '3' ||
-                                            `${index}` == '4'
-                                            ? `${(widthRatio * 8) / 14}rem`
+                                    left: `${index}` == '0' ||
+                                        `${index}` == '6' ||
+                                        `${index}` == '7'
+                                        ? `${(widthRatio * 8) / 14}rem`
+                                        : `${index}` == '1' || `${index}` == '5'
+                                            ? `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3 + ${(widthRatio * 8 * 2) / 14}rem)`
                                             : '',
-                                        left: `${index}` == '0' ||
-                                            `${index}` == '6' ||
-                                            `${index}` == '7'
-                                            ? `${(widthRatio * 8) / 14}rem`
-                                            : `${index}` == '1' || `${index}` == '5'
-                                                ? `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3 + ${(widthRatio * 8 * 2) / 14}rem)`
-                                                : '',
+                                } },
+                                React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell`, style: {
+                                        borderLeftWidth: `${(4 * widthRatio) / 14}rem`,
+                                        borderRightWidth: `${(4 * widthRatio) / 14}rem`,
+                                        borderTopWidth: `${(4 * heightRatio) / 14}rem`,
+                                        borderBottomWidth: `${(4 * heightRatio) / 14}rem`,
+                                        paddingTop: `${(8 * heightRatio) / 14}rem`,
+                                        paddingBottom: `${(8 * heightRatio) / 14}rem`,
+                                        paddingLeft: `${(2 * widthRatio) / 14}rem`,
+                                        paddingRight: `${(2 * widthRatio) / 14}rem`,
                                     } },
-                                    React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell`, style: {
-                                            borderLeftWidth: `${(4 * widthRatio) / 14}rem`,
-                                            borderRightWidth: `${(4 * widthRatio) / 14}rem`,
-                                            borderTopWidth: `${(4 * heightRatio) / 14}rem`,
-                                            borderBottomWidth: `${(4 * heightRatio) / 14}rem`,
-                                            paddingTop: `${(8 * heightRatio) / 14}rem`,
-                                            paddingBottom: `${(8 * heightRatio) / 14}rem`,
-                                            paddingLeft: `${(2 * widthRatio) / 14}rem`,
-                                            paddingRight: `${(2 * widthRatio) / 14}rem`,
+                                    item.src && (React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell-image`, style: {
+                                            height: `${(heightRatio * 40) / 14}rem`,
                                         } },
-                                        item.src && (React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell-image`, style: {
+                                        React.createElement("img", { src: item.src, alt: item.desc, className: `${CLASS_PREFIX}__turntable-cell-icon`, style: {
+                                                width: `${(widthRatio * 40) / 14}rem`,
                                                 height: `${(heightRatio * 40) / 14}rem`,
-                                            } },
-                                            React.createElement("img", { src: item.src, alt: item.desc, className: `${CLASS_PREFIX}__turntable-cell-icon`, style: {
-                                                    width: `${(widthRatio * 40) / 14}rem`,
-                                                    height: `${(heightRatio * 40) / 14}rem`,
-                                                } }))),
-                                        item.desc && (React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell-desc`, style: {
-                                                marginTop: `${(heightRatio * 6) / 14}rem`,
-                                                fontSize: `${(widthRatio * 12) / 14}rem`,
-                                                lineHeight: `${(heightRatio * 17) / 14}rem`,
-                                            } }, item.desc)))));
-                            })),
-                            React.createElement("div", { className: classNames(`${CLASS_PREFIX}__turntable-btn`, btnActived ? 'is-actived' : ''), style: {
-                                    width: `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3)`,
-                                    height: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3)`,
-                                    top: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`,
-                                    left: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`,
+                                            } }))),
+                                    item.desc && (React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell-desc`, style: {
+                                            marginTop: `${(heightRatio * 6) / 14}rem`,
+                                            fontSize: `${(widthRatio * 12) / 14}rem`,
+                                            lineHeight: `${(heightRatio * 17) / 14}rem`,
+                                        } }, item.desc)))));
+                        })),
+                        React.createElement("div", { className: classNames(`${CLASS_PREFIX}__turntable-btn`, btnActived ? 'is-actived' : ''), style: {
+                                width: `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3)`,
+                                height: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3)`,
+                                top: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`,
+                                left: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`,
+                            } },
+                            React.createElement("div", { className: `${CLASS_PREFIX}__btn-inner`, style: {
+                                    paddingTop: `${(9 * heightRatio) / 14}rem`,
+                                    paddingBottom: `${(9 * heightRatio) / 14}rem`,
+                                    paddingLeft: `${(9 * widthRatio) / 14}rem`,
+                                    paddingRight: `${(9 * widthRatio) / 14}rem`,
                                 } },
-                                React.createElement("div", { className: `${CLASS_PREFIX}__btn-inner`, style: {
-                                        paddingTop: `${(9 * heightRatio) / 14}rem`,
-                                        paddingBottom: `${(9 * heightRatio) / 14}rem`,
-                                        paddingLeft: `${(9 * widthRatio) / 14}rem`,
-                                        paddingRight: `${(9 * widthRatio) / 14}rem`,
-                                    } },
-                                    React.createElement("div", { className: `${CLASS_PREFIX}__btn` },
-                                        React.createElement("a", { "data-testid": "start-lottery", className: `${CLASS_PREFIX}__btn-image`, style: {
-                                                paddingTop: `${(11 * heightRatio) / 14}rem`,
-                                                paddingBottom: `${(11 * heightRatio) / 14}rem`,
-                                                paddingLeft: `${(15 * widthRatio) / 14}rem`,
-                                                paddingRight: `${(15 * widthRatio) / 14}rem`,
-                                            }, onClick: startLottery },
-                                            React.createElement("p", { className: `${CLASS_PREFIX}__btn-text`, style: {
-                                                    fontSize: `${(widthRatio * 18) / 14}rem`,
-                                                    lineHeight: `${(widthRatio * 22) / 14}rem`,
-                                                } },
-                                                "\u5F00\u59CB",
-                                                React.createElement("br", null),
-                                                "\u62BD\u5956"))))))))))));
+                                React.createElement("div", { className: `${CLASS_PREFIX}__btn` },
+                                    React.createElement("a", { "data-testid": "start-lottery", className: `${CLASS_PREFIX}__btn-image`, style: {
+                                            paddingTop: `${(11 * heightRatio) / 14}rem`,
+                                            paddingBottom: `${(11 * heightRatio) / 14}rem`,
+                                            paddingLeft: `${(15 * widthRatio) / 14}rem`,
+                                            paddingRight: `${(15 * widthRatio) / 14}rem`,
+                                        }, onClick: startLottery },
+                                        React.createElement("p", { className: `${CLASS_PREFIX}__btn-text`, style: {
+                                                fontSize: `${(widthRatio * 18) / 14}rem`,
+                                                lineHeight: `${(widthRatio * 22) / 14}rem`,
+                                            } },
+                                            "\u5F00\u59CB",
+                                            React.createElement("br", null),
+                                            "\u62BD\u5956")))))))))));
 });

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

@@ -1,5 +1,7 @@
 .weda-RichTextView {
   font-size: 14px;
+  word-wrap: break-word;
+  word-break: break-all;
 }
 .weda-RichTextView blockquote {
   margin: 0 0 10px;

package/dist/web/components/swiper/index.js

@@ -6,6 +6,7 @@ import { useDebouncedCallback, useEventListener, useResizeObserver, } from '@rea
 import './index.css';
 import { emptyObject } from '../../utils/constant';
 export default function Swiper({ children, className, style, autoplay = true, circular = true, vertical = false, indicatorDots, indicatorColor = 'rgba(200, 200, 200, 0.9)', indicatorActiveColor = 'rgba(0, 0, 0, 0.9)', duration = 500, interval = 5000, current = 0, events = emptyObject, id, }) {
+    var _a;
     const originChildrenRef = useRef(null);
     const [realChildren, setRealChildren] = useState([]);
     const itemCount = React.Children.count(realChildren);
@@ -15,14 +16,19 @@ export default function Swiper({ children, className, style, autoplay = true, ci
     const [height, setHeight] = useState(0);
     const { change = () => { } } = events;
     useEffect(() => {
-        const realChildren = Array.from(originChildrenRef.current.children).map((elem) => {
-            const reactFiberProp = Object.keys(elem).find((prop) => prop.startsWith('__reactInternalInstance'));
-            const reactFiber = elem[reactFiberProp];
-            const reactElem = React.createElement(reactFiber.elementType, reactFiber.pendingProps);
-            return reactElem;
-        });
-        setRealChildren(realChildren);
-    }, [children]);
+        // 等待dom渲染完成
+        // eslint-disable-next-line rulesdir/no-timer
+        const timer = setTimeout(() => {
+            const realChildren = Array.from(originChildrenRef.current.children).map((elem) => {
+                const reactFiberProp = Object.keys(elem).find((prop) => prop.startsWith('__reactInternalInstance'));
+                const reactFiber = elem[reactFiberProp];
+                const reactElem = React.createElement(reactFiber.elementType, reactFiber.pendingProps);
+                return reactElem;
+            });
+            setRealChildren(realChildren);
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [(_a = originChildrenRef.current) === null || _a === void 0 ? void 0 : _a.children, children]);
     useEffect(() => {
         if (autoplay) {
             // 自动切换

package/dist/web/components/table/BaseTable.js

@@ -422,7 +422,7 @@ export const BaseTable = (props) => {
             connectorParamsRef.current = connectorParams;
         }
     }, [connectorParams]);
-    // 移动端和自定义APIs场景不支持导入功能，监听变化存到表格上下文中
+    // 移动端和APIs场景不支持导入功能，监听变化存到表格上下文中
     useEffect(() => {
         handleContext({ state: { isH5, isModel } });
     }, [isH5, isModel]);
@@ -661,7 +661,7 @@ export const BaseTable = (props) => {
             // 刷新表格(查看当前页数据)
             refreshKeepPage: () => fetchData({ searchValues, pageSize, pageNo: pageIndex }),
         },
-    }));
+    }), [pageIndex, pageSize, searchValues, selectedKeys, records]);
     // 表格选中事件
     const handleRowsSelect = (keys) => {
         if (events === null || events === void 0 ? void 0 : events.rowsSelect) {
@@ -975,7 +975,7 @@ export const BaseTable = (props) => {
             return slotRender(slots.globalButton);
         }
         else if (enableGlobalButton === undefined) {
-            // 移动端和自定义APIs场景不支持导入功能
+            // 移动端和APIs场景不支持导入功能
             const buttonsList = isH5 || !isModel
                 ? buttons.filter((i) => i.action !== 'import')
                 : buttons;

package/dist/web/components/table/ExportFileModalByApi/index.js

@@ -128,7 +128,7 @@ export function ExportFileModalByApi({ onCancel, visible, fields, selectedKeysLi
                             maxWidth: '430px',
                         }, title: status === 'success'
                             ? '数据导出完成'
-                            : '数据导出中，请稍后...', description: status !== 'success' ? (React.createElement("div", null,
+                            : '数据导出中，请稍候...', description: status !== 'success' ? (React.createElement("div", null,
                             "\u5173\u95ED\u5F39\u7A97\u540E\uFF0C\u5BFC\u51FA\u4EFB\u52A1\u4F1A\u7EE7\u7EED\u6267\u884C\uFF0C\u53EF\u5728",
                             React.createElement("a", { onClick: () => {
                                     onCancel();

package/dist/web/components/table/ImportFileModal/index.js

@@ -261,7 +261,7 @@ export function ImportFileModal({ onCancel, visible, fields, dataBatchCreate, da
                 status !== 'validateError' && status !== 'error' && (React.createElement("div", { className: `status-wrap ${status}` },
                     React.createElement(Status, { icon: 'blank', size: 's', description: status === 'success'
                             ? '数据导入成功'
-                            : '数据导入中，请稍后...' }))))),
+                            : '数据导入中，请稍候...' }))))),
             nextAction: () => {
                 const repeatList = repeatabilityCheck(fileJsonMap);
                 if (repeatList.length) {

package/dist/web/components/table/ImportFileModalByApi/index.js

@@ -247,7 +247,7 @@ export function ImportFileModalByApi({ onCancel, handleInOrOutRecordModealVisibl
                 status !== 'validateError' && status !== 'error' && (React.createElement("div", { className: `status-wrap ${status}` },
                     React.createElement(Status, { icon: 'blank', size: 'm', title: status === 'success'
                             ? '数据导入完成'
-                            : '数据导入中，请稍后...', description: status !== 'success' ? (React.createElement("div", null,
+                            : '数据导入中，请稍候...', description: status !== 'success' ? (React.createElement("div", null,
                             "\u5173\u95ED\u5F39\u7A97\u540E\uFF0C\u5BFC\u5165\u4EFB\u52A1\u4F1A\u7EE7\u7EED\u6267\u884C\uFF0C\u53EF\u5728",
                             React.createElement("a", { onClick: () => {
                                     handleInOrOutRecordModealVisible('import');

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

@@ -1,9 +1,17 @@
-import * as React from 'react';
+import React, { forwardRef, useImperativeHandle } 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, }) => {
+export const WdBubble = forwardRef(function WdBubble({ trigger, placement, promptTheme, arrowPointAtCenter, openDelay, closeDelay, bubbleContent, bubbleChildren, events, id, style, className, }, ref) {
     const platform = usePlatform();
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            trigger,
+            placement,
+            promptTheme,
+        };
+    }, [trigger, placement, promptTheme]);
     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) {
@@ -14,4 +22,4 @@ export const WdBubble = ({ trigger, placement, promptTheme, arrowPointAtCenter,
                 }
             } },
             React.createElement("span", { className: 'wd-bubble-child' }, bubbleChildren))))));
-};
+});

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

@@ -1,16 +1,17 @@
-import * as React 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 { getParentForm } from '../../utils/widget-api';
 import { convertLegacyProps } from './convert-legacy-props';
 import { textToString, usePlatform } from '../../utils/platform';
-import { convertLegacyEnum } from '../../utils/tool';
+import { convertLegacyEnum, filterPropsWithOn } 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 }) => {
+export const WdButton = forwardRef(function WdButton(props, ref) {
+    const { 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, openType, ...restProps } = props;
     const platform = usePlatform();
     // 兼容旧版组件的属性值
     let size = convertLegacyProps('size', _size) || _size;
@@ -65,13 +66,8 @@ $node, ...props }) => {
         }
     };
     const propsStartWithOn = React.useMemo(() => {
-        return Object.keys(props).reduce((acc, cur) => {
-            if (cur.startsWith('on')) {
-                acc[cur] = props[cur];
-            }
-            return acc;
-        }, {});
-    }, [props]);
+        return filterPropsWithOn(restProps);
+    }, [restProps]);
     const Icon = () => {
         // icon样式
         const iconCls = classNames({
@@ -82,8 +78,21 @@ $node, ...props }) => {
         });
         return icon || iconSrc ? (React.createElement(WdIcon, { className: iconCls, size: 'sm', name: icon, src: iconSrc, type: iconSource })) : null;
     };
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            text,
+            theme,
+            variant,
+            size,
+            block,
+            disabled,
+            formType,
+            openType,
+        };
+    }, [text, theme, variant, size, block, disabled, formType, openType]);
     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-divider/wd-divider.js

@@ -1,12 +1,10 @@
-import * as React from 'react';
+import React, { forwardRef, useImperativeHandle } 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 }) => {
+export const WdDivider = forwardRef(function WdDivider({ className, style, id, type: _type = 'solid', ...restProps }, ref) {
     const platform = usePlatform();
     // 兼容旧版组件的属性值
     const { classPrefix } = useConfig();
@@ -16,7 +14,6 @@ export const WdDivider = ({ className, style, id, type: _type = 'solid',
     // 类名
     const classList = [compClassName];
     type && classList.push(`${compClassName}--${type}`);
-    // diriction && classList.push(`${btnClassName}-${diriction}`);
     // 用户定义的className
     classList.push(className);
     if (platform === 'h5') {
@@ -25,5 +22,11 @@ export const WdDivider = ({ className, style, id, type: _type = 'solid',
     else {
         classList.push('wd-pc-divider');
     }
-    return (React.createElement("div", { "data-testid": "wd-divider-test", className: classNames(...classList), style: style, id: id, ...props }));
-};
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            type,
+        };
+    }, [type]);
+    return (React.createElement("div", { "data-testid": "wd-divider-test", className: classNames(...classList), style: style, id: id, ...restProps }));
+});

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

@@ -1,11 +1,11 @@
-import * as React 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';
-export const WdIcon = ({ type: _type = 'inner', name, src, size: _size, events = emptyObject, className, style: _style, id, color: _color, ...props }) => {
+export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name, src, size: _size, events = emptyObject, className, style: _style, id, color: _color, ...props }, ref) {
     const platform = usePlatform();
     // 兼容旧版组件的属性值 size/color
     const remdiff = 2;
@@ -52,6 +52,15 @@ export const WdIcon = ({ type: _type = 'inner', name, src, size: _size, events =
             return acc;
         }, {});
     }, [props]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            type,
+            name,
+            src,
+            size,
+        };
+    }, [type, name, src, size]);
     if (type === 'inner') {
         return (React.createElement("i", { className: classNames(classes, className), style: style, id: id, onClick: onClick, ...propsStartWithOn }));
     }
@@ -60,4 +69,4 @@ export const WdIcon = ({ type: _type = 'inner', name, src, size: _size, events =
                 ? src
                 : 'https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg', onClick: onClick, ...propsStartWithOn }));
     }
-};
+});

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

@@ -1,15 +1,14 @@
-import * as React from 'react';
-import { useState, useMemo } from 'react';
+import React, { forwardRef, useImperativeHandle, 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({ 
+export default forwardRef(function WdImage({ 
 // 系统属性
 className, events = emptyObject, style, 
 // 组件属性
-src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }) {
+src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }, ref) {
     const [isError, setIsError] = useState(false);
     const { classPrefix } = useConfig();
     const cls = classNames({
@@ -52,8 +51,16 @@ src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }) {
             }
         }
     }, [style, objectFit, isError]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            fit,
+            src,
+            alt,
+        };
+    }, [fit, src, alt]);
     return src === realSrc || (realSrc !== undefined && src !== realSrc) ? (React.createElement(ImageInner, { objectFit: realFit, style: realStyle, className: cls, alt: alt, src: realSrc, isError: isError, setIsError: setIsError, events: events, lazyLoad: lazyLoad, imgPreview: imgPreview, maskClosable: maskClosable })) : null;
-}
+});
 function getObjectFitByWxImageMode(mode) {
     const array = [
         {