@cloudbase/weda-ui 3.4.11 → 3.4.13

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

@@ -63,3 +63,42 @@
   list-style: decimal !important;
   padding: revert !important;
 }
+
+.weda-RichTextView .tableWrapper,
+.weda-RichTextView div:has(> table) {
+  margin: 20px 0;
+  padding: 0;
+  overflow-x: auto;
+  display: flex;
+  justify-content: center;
+}
+.weda-RichTextView table {
+  min-width: fit-content;
+  border-collapse: collapse;
+  margin: 0;
+  overflow: hidden;
+}
+.weda-RichTextView table th,
+.weda-RichTextView table td {
+  box-sizing: border-box;
+  position: relative;
+  min-width: 70px;
+  padding: 0px 5px;
+  border: 1px solid #e1e6f0;
+  vertical-align: top;
+  background-clip: padding-box;
+}
+.weda-RichTextView table th {
+  font-weight: bold;
+  background-color: #f5f7fa;
+}
+.weda-RichTextView table td {
+  background-color: white;
+}
+.weda-RichTextView table th > p,
+.weda-RichTextView table td > p {
+  min-height: 1em;
+}
+.weda-RichTextView img {
+  vertical-align: unset;
+}

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

@@ -15,7 +15,7 @@ export default function RichTextView({ value = '', className, style, id, }) {
     const [displayValue, setDisplayValue] = useState('');
     const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
     const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
-    let tempValue = parseValue
+    let tempValue = (parseValue || '')
         .toString()
         .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
     const getSrc = async (img) => {

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

@@ -1,5 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * @Date: 2023-04-12 16:43:55
+ * @LastEditTime: 2023-05-04 12:10:01
+ * @Description:
+ */
+import * as React from 'react';
 import { Bubble, ConfigProvider } from 'tea-component';
 import Button from '../../components/button';
-const Share = (props) => (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(Bubble, { content: "\u8BE5\u7EC4\u4EF6\u5FC5\u987B\u5728\u5C0F\u7A0B\u5E8F\u771F\u5B9E\u73AF\u5883\u4F7F\u7528\u624D\u80FD\u591F\u770B\u5230\u5B9E\u9645\u6548\u679C\u3002", children: _jsx(Button, { ...props }) }) }));
+// @ts-ignore忽略ts交验
+// eslint-disable-next-line rulesdir/no-phantom-deps,import/no-unresolved
+import { autorun } from 'mobx';
+const Share = (props) => {
+    var _a, _b;
+    const [editorPlatforms, setEditorPlatforms] = React.useState([]);
+    const dispose = React.useMemo(() => {
+        return autorun(() => {
+            var _a, _b;
+            setEditorPlatforms((_b = (_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.wedaContext) === null || _b === void 0 ? void 0 : _b.editorPlatforms);
+        });
+    }, []);
+    React.useEffect(() => {
+        return () => {
+            dispose();
+        };
+    }, [dispose]);
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: ((_b = (_a = window.$w) === null || _a === void 0 ? void 0 : _a.wedaContext) === null || _b === void 0 ? void 0 : _b.isEditorMode) ||
+            (editorPlatforms === null || editorPlatforms === void 0 ? void 0 : editorPlatforms.includes('MP')) ? (_jsx(Bubble, { content: "\u8BE5\u7EC4\u4EF6\u5FC5\u987B\u5728\u5C0F\u7A0B\u5E8F\u771F\u5B9E\u73AF\u5883\u4F7F\u7528\u624D\u80FD\u591F\u770B\u5230\u5B9E\u9645\u6548\u679C\u3002", children: _jsx(Button, { ...props }) })) : null }));
+};
 export default Share;

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

@@ -87,5 +87,5 @@ export function UploadCSVFile({ parseFile, fields, datasourceTitle, dbName, setD
                                             setDisableNext(true);
                                         }, children: "\u5220\u9664" })] }) }), children: isDragging ? ('释放鼠标') : (_jsx(Status, { className: "upload-file", icon: 'blank', size: 's', operation: _jsxs(_Fragment, { children: [_jsx("a", { onClick: open, children: "\u70B9\u51FB\u4E0A\u4F20" }), " /", ' ', _jsx(Text, { theme: "weak", children: "\u62D6\u62FD\u5230\u6B64\u533A\u57DF" })] }) })) })) }) }), _jsx("div", { className: "modal-upload-text-wrap", children: _jsxs("ul", { children: [_jsxs("li", { children: ["1\u3001\u8BF7\u4E0B\u8F7D\u4F7F\u7528", _jsx("span", { onClick: () => {
                                         getCSVTemplate(fields, datasourceTitle);
-                                    }, children: "\u00A0 \u5BFC\u5165\u6A21\u7248" }), "\uFF0C\u5E76\u6309\u7167\u793A\u4F8B\u586B\u5199\u6570\u636E\uFF0C\u4EE5\u4FDD\u8BC1\u6570\u636E\u5BFC\u5165\u987A\u5229"] }), _jsx("li", { children: "2\u3001\u652F\u6301xlsx\u7C7B\u578B\u6587\u4EF6\uFF0C\u8981\u6C42\u6587\u4EF6\u5927\u5C0F2M\u4EE5\u5185\uFF0C\u4E0D\u80FD\u8D85\u8FC710000\u884C" }), _jsxs("li", { children: [_jsx("div", { children: "3\u3001\u5BFC\u5165\u66F4\u65B0\u8BF4\u660E" }), _jsx("div", { children: "\u00A01\uFF09\u652F\u6301\u9009\u62E9\u5F00\u542F\u552F\u4E00\u5C5E\u6027\u7684\u5B57\u6BB5\uFF0C\u7528\u4E8E\u5339\u914D\u5E76\u66F4\u65B0\u5DF2\u6709\u7684\u6570\u636E\u8BB0\u5F55" }), _jsx("div", { children: "\u00A02\uFF09\u5BFC\u5165\u6A21\u5F0F\u4E3A\u300C\u65B0\u589E\u6216\u66F4\u65B0\u300D\u65F6\uFF0C\u5982\u300C\u6570\u636E\u6807\u8BC6\u300D\u5217\u4E3A\u7A7A\uFF0C\u8BE5\u884C\u6570\u636E\u4F1A\u6267\u884C\u65B0\u589E\u64CD\u4F5C" })] }), _jsxs("li", { children: [_jsx("div", { children: "4\u3001\u6570\u636E\u683C\u5F0F\u8BF4\u660E" }), _jsx("div", { children: "\u00A0 1\uFF09\u679A\u4E3E\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u9009\u62E9\u9009\u9879\u6807\u8BC6\u6216\u9009\u9879\u503C\u8FDB\u884C\u5BFC\u5165\uFF1A\u9009\u9879\u6807\u8BC6\u4E3A\u8868\u683C\u4E2D\u5C55\u793A\u7684\u4E1A\u52A1\u540D\u79F0\uFF1B\u9009\u9879\u503C\u4E3A\u9009\u9879\u7684\u7CFB\u7EDF\u552F\u4E00\u6807\u8BC6" }), _jsx("div", { children: "\u00A02\uFF09\u5173\u8054\u5173\u7CFB\u3001\u4E3B\u5B50\u660E\u7EC6\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u9009\u62E9\u4E3B\u5217\u5B57\u6BB5\u6216\u6570\u636E\u6807\u8BC6\u8FDB\u884C\u5BFC\u5165\uFF1A\u4E3B\u5217\u5B57\u6BB5\u4E3A\u8868\u683C\u4E2D\u5C55\u793A\u7684\u5173\u8054\u6570\u636E\u4E1A\u52A1\u540D\u79F0\uFF1B\u6570\u636E\u6807\u8BC6\u4E3A\u5173\u8054\u6570\u636E\u7684\u7CFB\u7EDF\u552F\u4E00\u6807\u8BC6" }), _jsx("div", { children: "\u00A03\uFF09\u5E03\u5C14\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u5BFC\u5165\u300C\u662F/\u5426\u300D\u6216\u300Ctrue/false\u300D" }), _jsx("div", { children: "\u00A04\uFF09\u56FE\u7247\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u5BFC\u5165https\u6216cloud\u534F\u8BAE\u7684\u56FE\u7247\u5730\u5740" }), _jsx("div", { children: "\u00A05\uFF09\u6587\u4EF6\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301cloud\u534F\u8BAE\u7684\u6587\u4EF6\u5730\u5740" }), _jsx("div", { children: "\u00A06\uFF09\u5730\u7406\u4F4D\u7F6E\u7C7B\u578B\u6570\u636E\uFF1A\u6570\u636E\u683C\u5F0F\u8981\u6C42\u4E3A\u5730\u70B9\u540D\u79F0(\u5750\u6807\u7ECF\u5EA6\uFF0C\u5750\u6807\u7EF4\u5EA6)" })] })] }) })] }));
+                                    }, children: "\u00A0 \u5BFC\u5165\u6A21\u7248" }), "\uFF0C\u5E76\u6309\u7167\u793A\u4F8B\u586B\u5199\u6570\u636E\uFF0C\u4EE5\u4FDD\u8BC1\u6570\u636E\u5BFC\u5165\u987A\u5229"] }), _jsx("li", { children: "2\u3001\u652F\u6301xlsx\u7C7B\u578B\u6587\u4EF6\uFF0C\u8981\u6C42\u6587\u4EF6\u5927\u5C0F2M\u4EE5\u5185\uFF0C\u4E0D\u80FD\u8D85\u8FC710000\u884C" }), _jsxs("li", { children: [_jsx("div", { children: "3\u3001\u5BFC\u5165\u66F4\u65B0\u8BF4\u660E" }), _jsx("div", { children: "\u00A01\uFF09\u652F\u6301\u9009\u62E9\u5F00\u542F\u552F\u4E00\u5C5E\u6027\u7684\u5B57\u6BB5\uFF0C\u7528\u4E8E\u5339\u914D\u5E76\u66F4\u65B0\u5DF2\u6709\u7684\u6570\u636E\u8BB0\u5F55" }), _jsx("div", { children: "\u00A02\uFF09\u5BFC\u5165\u6A21\u5F0F\u4E3A\u300C\u65B0\u589E\u6216\u66F4\u65B0\u300D\u65F6\uFF0C\u5982\u300C\u6570\u636E\u6807\u8BC6\u300D\u5217\u4E3A\u7A7A\uFF0C\u8BE5\u884C\u6570\u636E\u4F1A\u6267\u884C\u65B0\u589E\u64CD\u4F5C" }), _jsx("div", { children: "\u00A03\uFF09\u5355\u5143\u683C\u5185\u5BB9\u4E3A\u7A7A\u65F6\uFF0C\u8BE5\u7A7A\u503C\u5C06\u8986\u76D6\u539F\u6709\u6570\u636E\uFF0C\u8BF7\u8C28\u614E\u64CD\u4F5C" })] }), _jsxs("li", { children: [_jsx("div", { children: "4\u3001\u6570\u636E\u683C\u5F0F\u8BF4\u660E" }), _jsx("div", { children: "\u00A0 1\uFF09\u679A\u4E3E\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u9009\u62E9\u9009\u9879\u6807\u8BC6\u6216\u9009\u9879\u503C\u8FDB\u884C\u5BFC\u5165\uFF1A\u9009\u9879\u6807\u8BC6\u4E3A\u8868\u683C\u4E2D\u5C55\u793A\u7684\u4E1A\u52A1\u540D\u79F0\uFF1B\u9009\u9879\u503C\u4E3A\u9009\u9879\u7684\u7CFB\u7EDF\u552F\u4E00\u6807\u8BC6" }), _jsx("div", { children: "\u00A02\uFF09\u5173\u8054\u5173\u7CFB\u3001\u4E3B\u5B50\u660E\u7EC6\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u9009\u62E9\u4E3B\u5217\u5B57\u6BB5\u6216\u6570\u636E\u6807\u8BC6\u8FDB\u884C\u5BFC\u5165\uFF1A\u4E3B\u5217\u5B57\u6BB5\u4E3A\u8868\u683C\u4E2D\u5C55\u793A\u7684\u5173\u8054\u6570\u636E\u4E1A\u52A1\u540D\u79F0\uFF1B\u6570\u636E\u6807\u8BC6\u4E3A\u5173\u8054\u6570\u636E\u7684\u7CFB\u7EDF\u552F\u4E00\u6807\u8BC6" }), _jsx("div", { children: "\u00A03\uFF09\u5E03\u5C14\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u5BFC\u5165\u300C\u662F/\u5426\u300D\u6216\u300Ctrue/false\u300D" }), _jsx("div", { children: "\u00A04\uFF09\u56FE\u7247\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u5BFC\u5165https\u6216cloud\u534F\u8BAE\u7684\u56FE\u7247\u5730\u5740" }), _jsx("div", { children: "\u00A05\uFF09\u6587\u4EF6\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301cloud\u534F\u8BAE\u7684\u6587\u4EF6\u5730\u5740" }), _jsx("div", { children: "\u00A06\uFF09\u5730\u7406\u4F4D\u7F6E\u7C7B\u578B\u6570\u636E\uFF1A\u6570\u636E\u683C\u5F0F\u8981\u6C42\u4E3A\u5730\u70B9\u540D\u79F0(\u5750\u6807\u7ECF\u5EA6\uFF0C\u5750\u6807\u7EF4\u5EA6)" })] })] }) })] }));
 }

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import getLocalCounter from '../../utils/getLocalCounter';
+export const WdCheckbox = ({ index, option, name, size, disabled, readOnly, checkedItemValue, getChangeHandler, isAll, }) => {
+    const { classPrefix } = useConfig();
+    const { label, value: optionValue } = option;
+    // 类名
+    const classList = [];
+    switch (size) {
+        case 'sm':
+            classList.push(`size-sm `);
+            break;
+        case 'md':
+            classList.push(`size-md `);
+            break;
+        case 'lg':
+            classList.push(`size-lg `);
+            break;
+        default:
+            classList.push();
+    }
+    // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
+    const hashcode = React.useMemo(() => getLocalCounter(), []);
+    const _id = `checkbox-${hashcode}-${index}`;
+    const _name = `checkbox-${hashcode}-${name}`;
+    const NUMBER_1 = 1;
+    return (_jsxs("div", { className: `${classPrefix}-checkbox-wrap ${classNames(classList)}  ${checkedItemValue[optionValue] ? 'is-checked' : ''}  ${isAll ? 'is-indeterminate' : ''} ${disabled || readOnly ? 'is-disabled' : ''} ${'checkbox' + (index + NUMBER_1)}`, "data-testid": "wd-checkbox-test", onClickCapture: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            getChangeHandler(e, optionValue);
+        }, children: [_jsx("input", { className: `${classPrefix}-checkbox-input `, type: "checkbox", id: _id, name: _name, value: optionValue, disabled: disabled || readOnly, checked: !!checkedItemValue[optionValue], onChange: (e) => e.stopPropagation() }), _jsx("span", { className: `${classPrefix}-checkbox-inner ` }), label && (_jsx("span", { className: `${classPrefix}-checkbox-label`, children: label }))] }, _id));
+};

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

@@ -0,0 +1,3 @@
+import { WdCheckbox } from './checkbox';
+export { WdCheckbox } from './checkbox';
+export default WdCheckbox;

package/dist/web/components/wd-checkbox-list/checkboxList.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { WdCheckbox } from '../wd-checkbox';
+import { WdFormItem } from '../wd-form-item';
+import { emptyObject } from '../../utils/constant';
+import { usePlatform } from '../../utils/platform';
+import { useFormInputTrait } from '../form-input-hooks';
+import fromEntries from 'object.fromentries';
+import { callWedaApi } from '../../utils/tcb';
+import destr from 'destr';
+import { useSize } from '../../utils/hooks/useFormLegacy';
+export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, inputRef) {
+    const { range: propRange, direction, events = emptyObject, format = '', enumName = '', label, } = props;
+    const [innerHandle, setInnerHandle] = React.useState({}); // hook里挂出的属性
+    const size = useSize(props);
+    const platform = usePlatform();
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-checkbox-group  `;
+    // 类名
+    const classList = [compClassName];
+    ['inline'].includes(direction) &&
+        classList.push(`${classPrefix}-checkbox-group--inline  `);
+    /** 兼容从 Form 获取属性，必须引入，自动挂载组件方法 */
+    const traitProps = { ...props, inputRef, setInnerHandle };
+    const { value: defaultValue, onChange: outerOnChange, disabled, readOnly, validateErrorMsg, validateState, visible, name, value, required, layout, } = useFormInputTrait(traitProps);
+    const [options, setOptions] = React.useState(format === 'x-enum' ? [] : propRange);
+    const [enumOptions, setEnumOptions] = React.useState([]);
+    const [checkedItemValue, setCheckedItemValue] = React.useState(fromEntries(options.map(({ value, checked }) => [value, !!checked])));
+    /**
+     * 在ios h5端, label和input的绑定不生效
+     * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
+     */
+    const getChangeHandler = function (e, value) {
+        const checked = !checkedItemValue[value];
+        const newMap = Object.assign({}, checkedItemValue, {
+            [value]: checked,
+        });
+        if (!disabled && !readOnly) {
+            setCheckedItemValue(newMap);
+            const value = Object.entries(newMap)
+                .filter(([, checked]) => checked)
+                .map(([value]) => value);
+            events === null || events === void 0 ? void 0 : events.change({ value }, { originEvent: e });
+            outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value);
+        }
+    };
+    React.useEffect(() => {
+        setCheckedItemValue(fromEntries(options.map(({ value, checked }) => [value, !!checked])));
+    }, [options]);
+    React.useEffect(() => {
+        if (format !== 'x-enum') {
+            const opts = propRange &&
+                propRange.map((item) => {
+                    const checked = defaultValue &&
+                        defaultValue.find((val) => `${val}` === `${item.value}`);
+                    return {
+                        value: item.value,
+                        label: item.label,
+                        checked: !!checked,
+                    };
+                });
+            setOptions(opts);
+        }
+    }, [propRange, defaultValue, format]);
+    React.useEffect(() => {
+        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+        if (format === 'x-enum' && enumName) {
+            fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useImperativeHandle(inputRef, () => ({
+        ...innerHandle,
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+    }), [innerHandle, name, value, label, required, visible, disabled, readOnly]);
+    const fetchData = async (param) => {
+        var _a, _b, _c;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        /* istanbul ignore next */
+        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+                checked: false,
+            };
+        });
+        setEnumOptions(enumOption);
+        const opt = enumOption &&
+            enumOption.map((item) => {
+                const checked = defaultValue &&
+                    defaultValue.find((val) => `${val}` === `${item.value}`);
+                return {
+                    value: item.value,
+                    label: item.label,
+                    checked: !!checked,
+                };
+            });
+        setOptions(opt);
+    };
+    React.useEffect(() => {
+        if (format === 'x-enum') {
+            const opt = enumOptions &&
+                enumOptions.map((item) => {
+                    const checked = defaultValue &&
+                        defaultValue.find((val) => `${val}` === `${item.value}`);
+                    return {
+                        value: item.value,
+                        label: item.label,
+                        checked: !!checked,
+                    };
+                });
+            setOptions(opt);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultValue, format]);
+    const labelSize = () => {
+        if (['h5'].includes(platform) ||
+            (['horizontal', ''].includes(layout) &&
+                ['vertical'].includes(direction))) {
+            return 'xs';
+        }
+        return size;
+    };
+    return (visible && (_jsx(WdFormItem, { ...props, testId: "form-checkbox-list", validateErrorMsg: validateErrorMsg, validateState: validateState, readValue: defaultValue, disabled: disabled, classRoot: 'checkbox', size: labelSize(), layout: layout, children: _jsx("div", { className: classNames(classList), children: options === null || options === void 0 ? void 0 : options.map((Item, index) => {
+                return (_createElement(WdCheckbox, { ...props, size: ['h5'].includes(platform) ? 'lg' : props === null || props === void 0 ? void 0 : props.size, key: index, index: index, option: Item, disabled: disabled, readOnly: readOnly, getChangeHandler: getChangeHandler, checkedItemValue: checkedItemValue }));
+            }) }) })));
+});

package/dist/web/components/wd-checkbox-list/index.js

@@ -0,0 +1,3 @@
+import { WdCheckboxList } from './checkboxList';
+export { WdCheckboxList } from './checkboxList';
+export default WdCheckboxList;

package/dist/web/components/wd-form/hooks/use-remote-value.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { debug } from '../../../utils/console';
 import { usePlatform } from '../../../utils/platform';
 import { alertError } from '../../form/form';
@@ -19,7 +19,7 @@ methodGetItem, paramGetItem, appCloud, isDataModel, }) {
         console.error(err);
         alertError(platform, '表单容器数据查询失败');
     }, [platform]);
-    const { data: remoteValue, error, isLoading, } = useSWR(() => {
+    const { data: remoteValue, error, isLoading, mutate, } = useSWR(() => {
         if (!formTypeWithInitValue.includes(formType) || !dataSourceName) {
             logger.debug('formType没有初始值或者，没配数据源', {
                 formType,
@@ -70,10 +70,17 @@ methodGetItem, paramGetItem, appCloud, isDataModel, }) {
         }, true);
     }, {
         onError: onInitialValuesError,
+        revalidateOnFocus: false,
     });
+    useEffect(() => {
+        return () => {
+            mutate();
+        };
+    }, [mutate]);
     return {
         remoteValue,
         error,
         isLoading,
+        mutate,
     };
 }

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint max-lines: [error, 500] */
+/* eslint max-lines: [error, 600] */
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { useDebouncedCallback, useMap, useMountEffect, useSyncedRef, } from '@react-hookz/web';
+import { useDebouncedCallback, useDebouncedEffect, useMap, useMountEffect, useSyncedRef, } from '@react-hookz/web';
 import { isInIde, usePlatform } from '../../utils/platform';
-import { ConfigProvider, Form as TeaForm } from 'tea-component';
 import classNames from '../../utils/classnames';
 import { debug } from '../../utils/console';
 import { useWedaAppContext } from '../../utils/widget-api';
@@ -16,10 +15,12 @@ import lodashSet from 'lodash.set';
 import lodashGet from 'lodash.get';
 import isObjectEqual from '../../utils/isObjectEqual';
 import { useDataSource } from '../../utils/hooks/useDataSource';
+import { WdForm as FormUi } from './wd-form';
+const SET_VALUE_DEBOUNCE_TIMEOUT = 200;
 const logger = debug('wd-form');
 const WdForm = React.forwardRef(function WdForm(props, ref) {
     var _a;
-    const { className, id, style, contentSlot: contentSlotEl, layout, formType, _id, datasourceType, dataSourceName, methodGetItem, paramGetItem, appCloud = tcbAppCloud, 
+    const { className, id, style, contentSlot: contentSlotEl, layout, formType, _id, datasourceType, dataSourceName, methodGetItem, methodCreate, methodUpdate, paramGetItem, appCloud = tcbAppCloud, 
     // 兼容流程setValue调用，其他地方别用
     $node, } = props;
     const formItemMap = useMap([]);
@@ -37,7 +38,10 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         'weui-form': platform === 'h5',
         'weda-form-pc': platform === 'pc',
         'gsd-h5-react-form-pc': platform === 'pc',
+        'wedatea2td-form': platform === 'pc',
     }, className);
+    const isDataModel = !['connector', 'custom-connector'].includes(datasourceType); // 是否为数据模型，兼容历史 undefined
+    const hasSetInitValueRef = useRef(false);
     const [initialValues, setInitialValues] = useState((_a = props.initialValues) !== null && _a !== void 0 ? _a : emptyObject);
     const eventsRef = useSyncedRef(props.events);
     const validate = useCallback(async () => {
@@ -70,6 +74,17 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         return errObj;
     }, [formItemMap]);
     const [errors, setErrors] = useState(undefined);
+    const { remoteValue: fetchedInitialValues, isLoading: isLoadingInitValues, error: initValueFetchError, } = useRemoteValue({
+        appCloud,
+        formType,
+        _id,
+        // methodCreate,
+        methodGetItem,
+        // methodUpdate,
+        paramGetItem,
+        dataSourceName,
+        isDataModel,
+    });
     const submit = useCallback(async () => {
         const { submit } = eventsRef.current;
         const errorObj = await validate();
@@ -95,7 +110,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             }
         });
     }, [eventsRef, formItemMap]);
-    const setValue = useCallback((data, setNull) => {
+    const setValue = useDebouncedCallback((data, setNull) => {
         if (typeof data !== 'object' || typeof data === null) {
             console.warn('setValue data need expect a object but got', data);
             return;
@@ -114,7 +129,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             }
         });
         updateFormContext();
-    }, [formItemMap, updateFormContext]);
+    }, [formItemMap, updateFormContext], SET_VALUE_DEBOUNCE_TIMEOUT);
     const clearValidate = useCallback(() => {
         formItemMap.forEach((item) => {
             if (!item.clearValidate || typeof item.clearValidate !== 'function') {
@@ -127,6 +142,10 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
     // useWhatChanged([formItemMap, initialValues, submit, validate]);
     useLoopRenderDetect();
     const { ready } = useWedaAppContext();
+    const [visible, setVisible] = React.useState(false);
+    React.useEffect(() => {
+        setVisible(true);
+    }, []);
     const previousFormType = useRef(null);
     useEffect(() => {
         if (!ready) {
@@ -143,8 +162,16 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             }
             else {
                 formItemMap.forEach((item) => {
-                    var _a;
-                    item.setReadOnly((_a = item.initialDisabled) !== null && _a !== void 0 ? _a : false);
+                    const { initialReadOnly, initialDisabled } = item || {};
+                    if (initialReadOnly) {
+                        item.setReadOnly(true);
+                    }
+                    else if (initialDisabled) {
+                        item.setDisabled(true);
+                    }
+                    else {
+                        item.setReadOnly(false);
+                    }
                 });
             }
         });
@@ -152,18 +179,6 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
     useMountEffect(() => {
         logger.debug('formItemMap', formItemMap);
     });
-    const isDataModel = !['connector', 'custom-connector'].includes(datasourceType); // 是否为数据模型，兼容历史 undefined
-    const { remoteValue: fetchedInitialValues, isLoading: isLoadingInitValues, error: initValueFetchError, } = useRemoteValue({
-        appCloud,
-        formType,
-        _id,
-        // methodCreate,
-        methodGetItem,
-        // methodUpdate,
-        paramGetItem,
-        dataSourceName,
-        isDataModel,
-    });
     useEffect(() => {
         if (isLoadingInitValues)
             return;
@@ -172,8 +187,13 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
              错误处理放在了 @link {onInitialValuesError}
              下面是可以拿到data了
              */
-            // TODO: 有哪些key可以暴露
-            setInitialValues(fetchedInitialValues);
+            setInitialValues((original) => {
+                if (hasSetInitValueRef.current) {
+                    return original;
+                }
+                hasSetInitValueRef.current = true;
+                return fetchedInitialValues;
+            });
             setValue(fetchedInitialValues, true);
         }
     }, [fetchedInitialValues, initValueFetchError, isLoadingInitValues, setValue]);
@@ -286,6 +306,10 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             dataSourceProfile,
             errors,
             clearValidate,
+            datasourceType,
+            methodCreate,
+            methodUpdate,
+            methodGetItem,
         };
     }, [
         authValue,
@@ -303,6 +327,10 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         clearValidate,
         updateFormContext,
         formData,
+        datasourceType,
+        methodCreate,
+        methodUpdate,
+        methodGetItem,
     ]);
     const setInitValue = useDebouncedCallback(() => {
         var _a;
@@ -314,10 +342,12 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             }
         }
         updateFormContext();
-    }, [formItemMap, initialValues, updateFormContext], 
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    200);
+    }, [formItemMap, initialValues, updateFormContext], SET_VALUE_DEBOUNCE_TIMEOUT);
+    const lastInitValueRef = useRef(null);
     React.useEffect(() => {
+        if (isObjectEqual(lastInitValueRef.current, initialValues)) {
+            return;
+        }
         // 单向 Form向下设置值
         let setValueReady = false;
         const timeout = 30;
@@ -337,19 +367,23 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             setInitValue();
         };
         setValueUntilReady();
+        lastInitValueRef.current = initialValues;
         return () => {
             if (id) {
                 clearTimeout(id);
             }
         };
     });
-    useEffect(() => {
+    useDebouncedEffect(() => {
         formItemMap.forEach((item) => {
             var _a;
             (_a = item === null || item === void 0 ? void 0 : item.forceUpdate) === null || _a === void 0 ? void 0 : _a.call(item);
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [layout]);
+    }, [formItemMap, layout, formItemMapKey], 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    15, 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    30);
     useLayoutEffect(() => {
         // 兼容流程
         if ($node) {
@@ -363,12 +397,13 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             };
         }
     }, [$node, setValue, submit]);
-    if (platform === 'h5') {
-        return (_jsx("div", { className: cls, style: style, id: id, children: _jsx("div", { className: "weui-cells__group weui-cells__group_form", children: contentSlot }) }));
-    }
-    else {
-        return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(TeaForm, { layout: layout, className: cls, style: style, id: id, children: contentSlot }) }));
-    }
+    const labelPosition = useMemo(() => {
+        if (layout === 'horizontal') {
+            return 'horizontal-left';
+        }
+        return 'vertical-left';
+    }, [layout]);
+    return (_jsx(FormUi, { layout: layout, className: cls, style: style, id: id, labelPosition: labelPosition, children: visible && contentSlot }));
 });
 function getFormDataFromItemMap(formItemMap) {
     const formData = {};

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+// import type { DataType } from '../../../configs/components/wd-form';
+import { usePlatform } from '../../utils/platform';
+// import { Input, ConfigProvider } from 'tea-component';
+export const WdForm = ({ className, layout, labelPosition, children, ...rest }) => {
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值
+    const { classPrefix } = useConfig();
+    // const InputWrap = React.useRef(null);
+    const formType = '';
+    const compClassName = `${classPrefix}-form`;
+    // 类名
+    const classList = [compClassName];
+    // weui添加className
+    ['weui'].includes(formType) && classList.push(`${classPrefix}-form--weui `);
+    platform === 'h5' && classList.push(`${classPrefix}-form--weui `);
+    layout === 'inline' && classList.push(`${classPrefix}-form--inline `);
+    switch (labelPosition) {
+        case 'horizontal-right':
+            classList.push(`${classPrefix}-form--horizontal-right`);
+            break;
+        case 'vertical-left':
+            classList.push(`${classPrefix}-form--vertical-left`);
+            break;
+        case 'vertical-right':
+            classList.push(`${classPrefix}-form--vertical-right`);
+            break;
+        default:
+            classList.push();
+    }
+    // 用户定义的className
+    classList.push(className);
+    if (platform === 'h5') {
+        classList.push('wd-h5-form');
+    }
+    else {
+        classList.push('wd-pc-form');
+    }
+    return (_jsx("div", { ...rest, className: classNames(...classList), children: children }));
+};

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

@@ -0,0 +1,3 @@
+import { WdFormCell } from './wd-form-cell';
+export { WdFormCell } from './wd-form-cell';
+export default WdFormCell;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { WdIcon } from '../wd-icon';
+export const WdFormCell = ({ className, layout, labelPosition, label, children, }) => {
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值
+    const { classPrefix } = useConfig();
+    // const InputWrap = React.useRef(null);
+    const formType = '';
+    const compClassName = `${classPrefix}-form-item  `;
+    // 类名
+    const classList = [compClassName];
+    // weui添加className
+    ['weui'].includes(formType) &&
+        classList.push(`${classPrefix}-form-item--weui `);
+    // @ts-expect-error 兼容入参
+    layout === 'inline' && classList.push(`${classPrefix}-form-item--inline `);
+    switch (labelPosition) {
+        case 'horizontal-right':
+            classList.push(`${classPrefix}-form-item--horizontal-right `);
+            break;
+        case 'vertical-left':
+            classList.push(`${classPrefix}-form-item--vertical-left `);
+            break;
+        case 'vertical-right':
+            classList.push(`${classPrefix}-form-item--vertical-right `);
+            break;
+        default:
+            classList.push();
+    }
+    // 用户定义的className
+    classList.push(className);
+    if (platform === 'h5') {
+        classList.push('wd-h5-form-item');
+    }
+    else {
+        classList.push('wd-pc-for-item');
+    }
+    return (_jsx("div", { className: `${classNames(...classList)} is-required`, children: _jsxs("div", { className: `${classPrefix}-form-item-wrap`, children: [_jsx("div", { className: `${classPrefix}-form-item-wrap__label is-nowrap`, children: _jsxs("label", { children: [_jsx("span", { className: `${classPrefix}-form-item-wrap__label-text`, children: label || '' }), _jsx("span", { className: `${classPrefix}-form-item-wrap__label-explain`, children: _jsx(WdIcon, { name: "td:help-circle" }) })] }) }), _jsx("div", { className: `${classPrefix}-form-item-wrap__control`, children: _jsx("div", { className: `${classPrefix}-form-item-wrap__control-wrap`, children: children }) })] }) }));
+};

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

@@ -0,0 +1,4 @@
+import { WdFormItem } from './wd-form-item';
+import { WdInputGroup } from './wd-input-group';
+export { WdFormItem, WdInputGroup };
+export default WdFormItem;