@cloudbase/weda-ui 3.4.7 → 3.4.9-alpha.1024

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

@@ -1,24 +1,456 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines */
+import { useRef, useEffect, useState, useMemo, memo, useImperativeHandle, forwardRef, } from 'react';
+import { ConfigProvider } from 'tea-component';
+import { Table, ExportFileModal, ImportFileModal, InOrOutRecordModal, deleteRecord, importHandleByApi, exportHandleByApi, exportHandle, FilterFieldsPanel, ToolBar, } from './components';
+import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
+import { DataSource } from '../../utils/datasource';
+import { CELL_CUSTOM_OPTION } from '../../utils/constant';
+import { useEnumContext } from '../../utils/hooks/context';
+import { EnumHoc } from '../../utils/hooks/EnumHoc';
+import { usePlatform, isInIde } from '../../utils/platform';
+import { convertWhere } from '../../utils/getModelParams';
+import { useAuthFields } from './hooks/useAuthFields';
+import { useDataSourceTitle } from './hooks/useDataSource';
+import { useTableData } from './hooks/useTableData';
+import { useViewFields } from './hooks/useViewFields';
+import { useQueryParams } from './hooks/useQueryParams';
+import { getSlots, getFilterFields, getSelectedView, getSortColumns, mapTableDataWithView, } from './utils';
+import { Mock } from './mock';
+import { getTableColumns, slotRender } from './components/FieldRender';
+import Modal from '../modal';
 import { WdButton } from '../wd-button';
-export const WdTable = ({ className, 
-// style,
-// id,
-type = 'solid', }) => {
-    // 兼容旧版组件的属性值
+const _defaultPageIndex = 1;
+const _defaultPageSize = 10;
+// eslint-disable-next-line complexity
+export const WdTable = forwardRef(function TableComp({ className, style, dataSourceType, bindConnectMetadata = {
+    datasource: { id: '', name: '', title: '' },
+}, // APImock数据
+connectorMethod = { name: '', inParams: [], outParams: [], title: '' }, // API方法
+connectorParams: rawConnectorParams = {}, // API查询入参
+bindMetadata = {
+    datasource: {},
+    enabledFieldNames: [],
+    selectedViewIds: [],
+}, // 数据源+字段data对象
+filterFields, // 筛选字段
+columnSets, // 列管理，具备列排序/列勾选/列自定义渲染作用，存在时代替enabledFieldNames
+rowColor, // 行背景色
+id, // 组件id
+events, // 事件
+orderBy, // 排序字段
+orderType, // 排序方式
+fixedFront = '', // 冻结首列至本列
+fixedEnd = '', // 冻结本列至尾列
+enableCellCustomOption, // 是否显示插槽操作列
+enableGlobalButton, // 是否显示插槽全局按钮
+enablePagination = true, columnSelectType = 'select', defaultPageIndex = _defaultPageIndex, defaultPageSize = _defaultPageSize, 
+// 以下为非标准属性，config中没有
+// isOrderBy, // API是否支持排序(旧的表格有该属性)
+isMock = false, //是否mock数据
+enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props }, ref) {
+    const where = convertWhere(props); // 查询参数
     const { classPrefix } = useConfig();
-    const compClassName = `${classPrefix}-table`;
-    // 类名
-    const classList = [compClassName];
-    type && classList.push(`${compClassName}--${type}`);
-    // diriction && classList.push(`${btnClassName}-${diriction}`);
-    // 用户定义的className
-    classList.push(className);
-    return (React.createElement("div", { className: `${classPrefix}-table-wrap`, "data-testid": "wd-table-test" },
-        React.createElement("div", { className: `${classPrefix}-table-wrap__toolbar` },
-            React.createElement("div", { className: `${classPrefix}-table-wrap__toolbar-col` },
-                React.createElement(WdButton, { theme: "primary", text: "\u65B0\u5EFA" }),
-                React.createElement(WdButton, { theme: "secondary", text: "\u5220\u9664" })),
-            React.createElement("div", { className: `${classPrefix}-table-wrap__toolbar-col` },
-                React.createElement(WdButton, { iconType: "icon-only", theme: "secondary", icon: "td:filter" })))));
-};
+    const platform = usePlatform();
+    const isH5 = platform === 'h5'; // 响应式判定
+    const [tableHightSize, setTableHightSize] = useState('md');
+    const tableClassList = {
+        [`${classPrefix}-table--size-${tableHightSize}`]: !!tableHightSize,
+    };
+    // 打开移动端筛选面板
+    const [openMobileFilter, setOpenMobileFilter] = useState(false);
+    const connectorParams = rawConnectorParams && JSON.parse(JSON.stringify(rawConnectorParams));
+    // 数据源类型是否是模型
+    const isModel = dataSourceType !== 'custom-connector';
+    const { datasource, enabledFieldNames, isNewData, selectedViewIds } = isModel
+        ? bindMetadata
+        : bindConnectMetadata;
+    const { outParams } = connectorMethod;
+    const dbName = datasource === null || datasource === void 0 ? void 0 : datasource.name;
+    const dbFieldNames = isModel ? enabledFieldNames : outParams;
+    // 视图列表 列表
+    const selectedView = getSelectedView(selectedViewIds);
+    // 判断是否支持视图
+    const isViewTable = selectedView === null || selectedView === void 0 ? void 0 : selectedView.length;
+    // 是否未绑定数据源
+    const isNoDataSourceBind = !dbName && !(connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name);
+    // wrap类名
+    const wrapClassList = {
+        [`${classPrefix}-table-wrap`]: true,
+        [`${classPrefix}-${platform}-table-wrap`]: true,
+        // 响应式css api
+        [`${classPrefix}-${platform}-table`]: true,
+        [`${classPrefix}-${platform}-table-without-global-btn`]: isH5 && (!enableGlobalButton || isNoDataSourceBind),
+    };
+    // 弹窗显隐
+    const [isInOrOutRecordModalVisible, setIsInOrOutRecordModalVisible] = useState(null);
+    const [isImportFileModalByApiVisible, setIsImportFileModalByApiVisible] = useState(false);
+    const [isExportFileModalByApiVisible, setIsExportFileModalByApiVisible] = useState(false);
+    // 移动端操作按钮弹窗
+    const [isMobileOptionVisible, setIsMobileOptionVisible] = useState(false);
+    const modalRef = useRef(null);
+    const { enumOptions } = useEnumContext();
+    const dataSourceAPI = useMemo(() => new DataSource(dbName), [dbName]); // datasource 方法-模型
+    // 插槽属性
+    const slots = getSlots(props);
+    // table选中key值
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    // 行点击出参
+    const [rowData, setRowData] = useState({});
+    // 筛选条件
+    const wList = where;
+    // 搜索和分页参数
+    const initPageIndex = isModel ? defaultPageIndex : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo;
+    const initPageSize = isModel ? defaultPageSize : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize;
+    const [queryParams, setQueryParams] = useState({
+        pageIndex: initPageIndex,
+        pageSize: initPageSize,
+        sort: [],
+        searchValues: [],
+        orderBy,
+        orderType,
+    });
+    const { dataSourceName } = useDataSourceTitle(dbName, isModel);
+    // 数据源名称
+    const datasourceTitle = dataSourceName || dbName;
+    // 过滤权限字段
+    const { authFields, fieldsLoading } = useAuthFields(dbName, dbFieldNames, isNewData, isModel, connectorMethod);
+    // 视图
+    const { viewFieldsData, viewFields } = useViewFields({
+        selectedView,
+        selectedViewIds,
+        dbName,
+        isModel,
+        authFields,
+        isViewTable,
+    });
+    const fields = isViewTable ? viewFields : authFields;
+    // 筛选字段
+    const filterFieldsData = getFilterFields(filterFields, fields);
+    // 可排序字段
+    const sortColumns = getSortColumns({ fields, columnSets });
+    // 查询参数
+    const { query } = useQueryParams({
+        queryParams,
+        wList,
+        viewFieldsData,
+        connectorParams,
+        isModel,
+        isViewTable,
+        events,
+    });
+    // 查询数据
+    const { tableData, total, tableLoading, getNewList } = useTableData({
+        dataSourceAPI,
+        dbName,
+        connectorMethod,
+        query,
+        events,
+        isModel,
+        isH5,
+        isNoDataSourceBind,
+    });
+    const refreshTable = () => {
+        // 清除选中的 key
+        setSelectedKeys([]);
+        if (queryParams.pageIndex === _defaultPageIndex) {
+            getNewList();
+        }
+        else {
+            setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
+        }
+    };
+    const isTableLoading = !isNoDataSourceBind && (tableLoading || fieldsLoading || !fields.length);
+    // 表格数据
+    const mapTableData = () => {
+        if (isMock || (isInIde() && isNoDataSourceBind)) {
+            return Mock.records;
+        }
+        // 加载过程中,pc端每次查询置空,h5端仅首页置空
+        // 避免编辑器内切换数据源时,column更改,table render还未更新造成渲染问题
+        if ((isTableLoading && !isH5) || isNoDataSourceBind) {
+            return [];
+        }
+        if (isTableLoading &&
+            isH5 &&
+            (queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === _defaultPageIndex) {
+            return [];
+        }
+        if (viewFieldsData === null || viewFieldsData === void 0 ? void 0 : viewFieldsData.selectedViewId) {
+            mapTableDataWithView(viewFieldsData, tableData);
+        }
+        return tableData;
+    };
+    const tableRecords = mapTableData();
+    // 表格 columns
+    const columns = useMemo(() => {
+        if (isMock || (isInIde() && isNoDataSourceBind)) {
+            return Mock.columns;
+        }
+        if (fieldsLoading || isNoDataSourceBind) {
+            return [];
+        }
+        const baseColumns = getTableColumns({
+            fields,
+            columnSets,
+            slots,
+            fixedFront,
+            fixedEnd,
+            isH5,
+        });
+        // 操作列
+        if (enableCellCustomOption && !isH5) {
+            const TableOption = ({ record, rowKey, recordIndex, column, columnIndex, }) => {
+                const component = useMemo(() => {
+                    // 计算单元格的值
+                    return slotRender(slots[CELL_CUSTOM_OPTION], {
+                        record,
+                        rowKey,
+                        recordIndex,
+                        column,
+                        columnIndex,
+                    });
+                }, [column, columnIndex, record, recordIndex, rowKey]);
+                return (_jsx("div", { className: `${classPrefix}-pc-table-option-btn-wrap`, children: component }));
+            };
+            // 展示插槽操作列
+            baseColumns.push({
+                key: 'button',
+                header: '操作',
+                width: 150,
+                align: 'left',
+                fixed: 'right',
+                render: (record, rowKey, recordIndex, column, columnIndex) => (_jsx(TableOption, { record: record, rowKey: rowKey, recordIndex: recordIndex, column: column, columnIndex: columnIndex })),
+            });
+        }
+        // 选择列
+        if (columnSelectType === 'radio') {
+            baseColumns.unshift({
+                key: 'weda_radio',
+                header: '',
+                width: 48,
+                fixed: 'left',
+            });
+        }
+        else if (columnSelectType === 'select') {
+            // 插入选择项列，进行冻结
+            baseColumns.unshift({
+                key: 'weda_select',
+                header: '',
+                width: 48,
+                fixed: 'left',
+            });
+        }
+        return baseColumns;
+    }, [
+        isMock,
+        isNoDataSourceBind,
+        fieldsLoading,
+        fields,
+        columnSets,
+        slots,
+        fixedFront,
+        fixedEnd,
+        isH5,
+        enableCellCustomOption,
+        columnSelectType,
+        classPrefix,
+    ]);
+    // 总数
+    const beforeModalDestroy = () => {
+        // 重新加载数据
+        refreshTable();
+    };
+    // 事件属性
+    useImperativeHandle(ref, () => ({
+        deleteOne: (params) => {
+            const selectedKeys = [];
+            const { id } = params;
+            if (id) {
+                selectedKeys.push(id);
+            }
+            deleteRecord({
+                selectedKeys,
+                isModel,
+                dataSourceAPI,
+                beforeModalDestroy,
+            });
+        },
+        // 删除选中数据
+        deleteSelected: () => deleteRecord({
+            selectedKeys,
+            isModel,
+            dataSourceAPI,
+            beforeModalDestroy,
+        }),
+        // 导入
+        import: () => importHandleByApi({
+            isModel,
+            isH5,
+            setIsImportFileModalByApiVisible,
+        }),
+        // 导出
+        export: () => exportHandle({
+            selectedKeys,
+            records: tableRecords,
+            enumOptions,
+            datasourceTitle,
+            columnSets,
+            fields: fields,
+        }),
+        // 后端导出
+        exportOptionalMode: () => exportHandleByApi({ isModel, isH5, setIsExportFileModalByApiVisible }),
+        refresh: () => {
+            refreshTable();
+        },
+        // 刷新表格(查看当前页数据)
+        refreshKeepPage: () => {
+            if (isH5) {
+                // 移动端下拉分页不支持查看当前页，刷新即首页
+                refreshTable();
+            }
+            else {
+                // 清除选中的 key
+                setSelectedKeys([]);
+                getNewList();
+            }
+        },
+        // 移动端打开弹窗
+        openOperationDialog: () => {
+            if (isH5) {
+                setIsMobileOptionVisible(true);
+            }
+        },
+        // 当前页数据
+        records: tableRecords,
+        // 当前总数
+        total: total,
+        pageNo: query.pageNo,
+        pageSize: query.pageSize,
+        selectedRecords: tableRecords.filter((_) => selectedKeys.find((key) => _._id === key)),
+        dataSourceType,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        columnSets,
+        datasourceTitle,
+        fields === null || fields === void 0 ? void 0 : fields.length,
+        isH5,
+        isModel,
+        selectedKeys,
+        tableRecords === null || tableRecords === void 0 ? void 0 : tableRecords.length,
+        total,
+        query.pageNo,
+        query.pageSize,
+        dataSourceType,
+    ]);
+    // 表格更改上下文数据
+    // 移动端和自定义APIs场景不支持导入功能，监听变化存到表格上下文中
+    useEffect(() => {
+        // 表格上下文
+        if (typeof (events === null || events === void 0 ? void 0 : events.onDataChange) === 'function') {
+            const selectedRecords = tableRecords.filter((_) => selectedKeys.find((key) => _._id === key));
+            events.onDataChange({
+                data: tableRecords,
+                state: {
+                    total: total,
+                    pageNo: query.pageNo,
+                    pageSize: query.pageSize,
+                    selectedRecords,
+                    isModel,
+                    isH5,
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isH5, isModel, selectedKeys, total, tableRecords === null || tableRecords === void 0 ? void 0 : tableRecords.length]);
+    useEffect(() => {
+        if (isModel) {
+            setQueryParams((queryParams) => ({
+                ...queryParams,
+                searchValues: (queryParams === null || queryParams === void 0 ? void 0 : queryParams.searchValues) || [],
+                pageIndex: defaultPageIndex,
+                pageSize: defaultPageSize,
+                orderBy: orderBy,
+                orderType: orderType,
+            }));
+        }
+        else {
+            setQueryParams(() => ({
+                pageIndex: (connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo) || _defaultPageIndex,
+                pageSize: (connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize) || _defaultPageSize,
+                orderBy: connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderBy,
+                orderType: connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderType,
+                sort: [],
+            }));
+        }
+    }, [defaultPageIndex, defaultPageSize, connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize, connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo, isModel, orderBy, orderType, connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderBy, connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderType]);
+    useEffect(() => {
+        if (isH5) {
+            setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
+        }
+        else {
+            setQueryParams((queryParams) => ({
+                ...queryParams,
+                pageSize: initPageSize,
+                pageIndex: initPageIndex,
+            }));
+        }
+        // 仅当切换小屏的时候重新请求
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isH5]);
+    const GlobalButton = memo(function GlobalButtonDom({ classPrefix, slots, }) {
+        return (_jsx("div", { className: `${classPrefix}-global-btn`, children: slotRender(slots) }));
+    });
+    const hasFilterButton = !!filterFieldsData.length;
+    const recordKey = isInIde() ? undefined : '_id';
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(EnumHoc, { fields: authFields, children: _jsxs("div", { className: classNames(wrapClassList, className), style: style, id: id, children: [_jsx(FilterFieldsPanel, { openMobileFilter: openMobileFilter, setOpenMobileFilter: setOpenMobileFilter, filterFields: filterFieldsData, fetchData: (searchValues = []) => {
+                            setQueryParams({ ...queryParams, searchValues, pageIndex: 1 });
+                        } }), _jsxs("div", { className: `${classPrefix}-table-container`, children: [!isH5 && !isNoDataSourceBind && (_jsxs("div", { className: `${classPrefix}-table-wrap-toolbar`, children: [enableGlobalButton && (_jsx("div", { className: `${classPrefix}-table-wrap-toolbar__col ${classPrefix}-table-wrap-toolbar__col-start`, children: _jsx(GlobalButton, { classPrefix: classPrefix, slots: slots === null || slots === void 0 ? void 0 : slots.globalButton }) })), (enableRefreshBtn || enableTableHeightSizeBtn) && (_jsx("div", { className: `${classPrefix}-table-wrap-toolbar__col ${classPrefix}-table-wrap-toolbar__col-end`, children: _jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: refreshTable, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
+                                                setOpenMobileFilter(true);
+                                            }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination }) }))] })), isH5 &&
+                                (enablePagination ||
+                                    enableRefreshBtn ||
+                                    enableTableHeightSizeBtn ||
+                                    hasFilterButton) && (_jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: refreshTable, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
+                                    setOpenMobileFilter(true);
+                                }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination })), _jsx(Table, { emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: tableClassList, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, records: tableRecords, sort: queryParams.sort, selectedKeys: selectedKeys, onSelectChange: (keys, context) => {
+                                    setSelectedKeys([].concat(keys));
+                                    if (events === null || events === void 0 ? void 0 : events.rowsSelect) {
+                                        const selectValue = columnSelectType === 'radio'
+                                            ? context === null || context === void 0 ? void 0 : context.record
+                                            : context === null || context === void 0 ? void 0 : context.selectedRecords;
+                                        events.rowsSelect(selectValue);
+                                    }
+                                }, isError: false, isLoading: isTableLoading, rowColor: rowColor, queryParams: queryParams, total: total, refreshTable: () => {
+                                    refreshTable();
+                                }, onQueryChange: (query) => {
+                                    setQueryParams({ ...queryParams, ...query });
+                                }, rowClick: (context) => {
+                                    if (events === null || events === void 0 ? void 0 : events.tabTableRow) {
+                                        events.tabTableRow({
+                                            record: context.record,
+                                            rowKey: context.rowKey,
+                                            recordIndex: context.recordIndex,
+                                        });
+                                    }
+                                    setRowData({
+                                        record: context.record,
+                                        rowKey: context.rowKey,
+                                        recordIndex: context.recordIndex,
+                                    });
+                                } }), isH5 && enableGlobalButton && !isNoDataSourceBind && (_jsx("div", { className: `${classPrefix}-h5-table-wrap-footer`, children: _jsx(GlobalButton, { classPrefix: classPrefix, slots: slots === null || slots === void 0 ? void 0 : slots.globalButton }) }))] }), _jsx(ImportFileModal, { dbName: dbName, datasourceTitle: datasourceTitle, fields: fields, setIsImportFileModalByApiVisible: setIsImportFileModalByApiVisible, isImportFileModalByApiVisible: isImportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible, refresh: () => {
+                            // 导入成功后刷新页面
+                            refreshTable();
+                        } }), _jsx(ExportFileModal, { whereList: wList, fields: fields, columns: columns, isExportFileModalByApiVisible: isExportFileModalByApiVisible, selectedKeys: selectedKeys, dbName: dbName, query: query, setIsExportFileModalByApiVisible: setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible }), _jsx(InOrOutRecordModal, { dbName: dbName, isInOrOutRecordModalVisible: isInOrOutRecordModalVisible, setIsImportFileModalByApiVisible: setIsImportFileModalByApiVisible, setIsExportFileModalByApiVisible: setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible }), isH5 && (_jsx(Modal, { className: `${classPrefix}-h5-table-option-modal-wrap`, disableCloseIcon: true, title: "\u64CD\u4F5C", visible: isMobileOptionVisible, outerRef: modalRef, events: {
+                            close: () => {
+                                setIsMobileOptionVisible(false);
+                            },
+                        }, content: '', customContent: _jsx("div", { className: `${classPrefix}-h5-table-option-btn-wrap`, children: enableCellCustomOption &&
+                                slotRender(slots[CELL_CUSTOM_OPTION], rowData) }), customButton: _jsx(WdButton, { variant: "text", text: "\u53D6\u6D88", events: {
+                                tap: () => {
+                                    setIsMobileOptionVisible(false);
+                                },
+                            } }) }))] }) }) }));
+});

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef, useImperativeHandle } from 'react';
 import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
@@ -72,32 +73,32 @@ export const WdText = forwardRef(function WdText({ className, style, id, level:
     }, [text, level, overflow, maxLines, space, userSelect, tips]);
     switch (level) {
         case 'title-1':
-            return (React.createElement("h1", { className: classNames(classes, className), style: inlineStyle, id: id, 
+            return (_jsx("h1", { className: classNames(classes, className), style: inlineStyle, id: id, 
                 //@ts-expect-error contentEditable type def sucks
-                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn }, textToString(text)));
+                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));
         case 'title-2':
-            return (React.createElement("h2", { className: classNames(classes, className), style: inlineStyle, id: id, 
+            return (_jsx("h2", { className: classNames(classes, className), style: inlineStyle, id: id, 
                 //@ts-expect-error contentEditable type def sucks
-                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn }, textToString(text)));
+                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));
         case 'title-3':
-            return (React.createElement("h3", { className: classNames(classes, className), style: inlineStyle, id: id, 
+            return (_jsx("h3", { className: classNames(classes, className), style: inlineStyle, id: id, 
                 //@ts-expect-error contentEditable type def sucks
-                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn }, textToString(text)));
+                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));
         case 'title-4':
-            return (React.createElement("h4", { className: classNames(classes, className), style: inlineStyle, id: id, 
+            return (_jsx("h4", { className: classNames(classes, className), style: inlineStyle, id: id, 
                 //@ts-expect-error contentEditable type def sucks
-                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn }, textToString(text)));
+                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));
         case 'title-5':
-            return (React.createElement("h5", { className: classNames(classes, className), style: inlineStyle, id: id, 
+            return (_jsx("h5", { className: classNames(classes, className), style: inlineStyle, id: id, 
                 //@ts-expect-error contentEditable type def sucks
-                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn }, textToString(text)));
+                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));
         case 'title-6':
-            return (React.createElement("h6", { className: classNames(classes, className), style: inlineStyle, id: id, 
+            return (_jsx("h6", { className: classNames(classes, className), style: inlineStyle, id: id, 
                 //@ts-expect-error contentEditable type def sucks
-                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn }, textToString(text)));
+                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));
         default:
-            return (React.createElement("p", { className: classNames(classes, className), style: inlineStyle, id: id, 
+            return (_jsx("p", { className: classNames(classes, className), style: inlineStyle, id: id, 
                 //@ts-expect-error contentEditable type def sucks
-                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn }, textToString(text)));
+                contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, title: tips ? textToString(text) : '', onClick: (e) => events.tap({}, { originEvent: e }), ...propsStartWithOn, children: textToString(text) }));
     }
 });

package/dist/web/components/web-view/index.css

@@ -0,0 +1,5 @@
+.wd-web-view-container {
+  border: 0;
+  width: 100vw;
+  height: 100vh;
+}

package/dist/web/components/web-view/index.js

@@ -0,0 +1,3 @@
+import { WebView } from './web-view';
+export { WebView } from './web-view';
+export default WebView;

package/dist/web/components/web-view/web-view.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useEffect, } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { isInIde, usePlatform } from '../../utils/platform';
+import { Bubble } from 'tea-component';
+import EmptyContent from '../statusContent';
+import './index.css';
+export const WebView = forwardRef(function WebView({ link, events, className, style }, ref) {
+    const platform = usePlatform();
+    const iframeRef = useRef(null);
+    // 样式
+    const { classPrefix } = useConfig();
+    const platformCss = `${classPrefix}-${platform}-web-view`;
+    const classes = {
+        [`${classPrefix}-web-view-container`]: true,
+        [platformCss]: true,
+    };
+    function onLoad() {
+        try {
+            linkCheck(link);
+        }
+        catch {
+            onError();
+        }
+    }
+    // 检测src是否存在
+    function linkCheck(src) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        // 这里设置需要检测的url
+        link.href = src;
+        link.onload = function () {
+            onSuccess();
+        };
+        link.onerror = function () {
+            onError();
+        };
+        document.body.appendChild(link);
+    }
+    function onError() {
+        (events === null || events === void 0 ? void 0 : events.error) && events.error({ src: link });
+    }
+    function onSuccess() {
+        (events === null || events === void 0 ? void 0 : events.load) && (events === null || events === void 0 ? void 0 : events.load({ src: link }));
+    }
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return { link };
+    }, [link]);
+    useEffect(() => {
+        // 监听message事件
+        window.addEventListener('message', (e) => {
+            const origin = e.origin || e['originalEvent'].origin;
+            if (link.indexOf(origin) >= 0)
+                (events === null || events === void 0 ? void 0 : events.message) && (events === null || events === void 0 ? void 0 : events.message({ data: e.data }));
+        }, false);
+    }, [events, link]);
+    return (_jsx(_Fragment, { children: isInIde() ? (_jsx(_Fragment, { children: _jsx(Bubble, { content: "\u8BE5\u7EC4\u4EF6\u5728\u5C0F\u7A0B\u5E8F\u7AEF\u5C06\u94FA\u6EE1\u6574\u4E2A\u9875\u9762\u5E76\u8986\u76D6\u5176\u4ED6\u7EC4\u4EF6\uFF0C\u5E76\u4E14\u5C0F\u7A0B\u5E8F\u4E3A\u4F01\u4E1A\u4E3B\u4F53\u65F6\u624D\u80FD\u6B63\u5E38\u4F7F\u7528", children: link ? (_jsx("iframe", { src: link, style: style, className: classNames(classes, className) })) : (_jsx("div", { style: style, className: classNames(classes, className), children: _jsx(EmptyContent, { emptyText: "\u6682\u65E0\u7F51\u9875\uFF0C\u8BF7\u8F93\u5165\u7F51\u9875\u94FE\u63A5", component: "table", isH5: true }) })) }) })) : (_jsx(_Fragment, { children: link ? (_jsx("iframe", { onLoad: onLoad, onError: () => onError(), ref: iframeRef, id: 'web-view', name: 'web-view', src: link, title: 'web-view', style: style, className: classNames(classes, className) })) : (_jsx("div", { style: style, className: classNames(classes, className), children: _jsx(EmptyContent, { emptyText: "\u6682\u65E0\u7F51\u9875\uFF0C\u8BF7\u8F93\u5165\u7F51\u9875\u94FE\u63A5", component: "table", isH5: true }) })) })) }));
+});

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
@@ -137,10 +138,6 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
             playerRef.current.load(realSrc);
         }
     }, [realSrc]);
-    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
-        React.createElement("div", { className: cls, id: id, style: style, "data-testid": "wedaVideo" },
-            React.createElement("div", { "data-vjs-player": true },
-                React.createElement("video", { ref: videoRef, className: `video-js vjs-big-play-centered ${CLASS_PREFIX}__video-wrap` })),
-            videoModalStatus && (React.createElement("div", { className: `${CLASS_PREFIX}__video-loading` }, realSrc === null ? React.createElement(Icon, { type: "loading" }) : videoErrMsg)))));
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: cls, id: id, style: style, "data-testid": "wedaVideo", children: [_jsx("div", { "data-vjs-player": true, children: _jsx("video", { ref: videoRef, className: `video-js vjs-big-play-centered ${CLASS_PREFIX}__video-wrap`, playsInline: true }) }), videoModalStatus && (_jsx("div", { className: `${CLASS_PREFIX}__video-loading`, children: realSrc === null ? _jsx(Icon, { type: "loading" }) : videoErrMsg }))] }) }));
 };
 export default WedaVideo;

package/dist/web/utils/constant.js

@@ -1,3 +1,4 @@
+export const NOT_EXISTED_VALUE = Symbol('not existed value');
 export const TitleType = {
     LEFT: 'left',
     TOP: 'top',