@cloudbase/weda-ui 3.5.2 → 3.6.0

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { forwardRef, useMemo, useState, useImperativeHandle, useEffect, useCallback, } from 'react';
+import { useConfig } from '../../utils/config-context';
+import WdIcon from '../wd-icon';
+import WdLink from '../wd-link';
+import { findSelectItem, navigateTo, getMenuList } from '../wd-menu-list/utils';
+import classNames from '../../utils/classnames';
+import { usePlatform } from '../../utils/platform';
+import '../style';
+export const WdTabBar = forwardRef(function WdTabBar(props, ref) {
+    // 样式
+    const { classPrefix } = useConfig();
+    const [selectedKey, setSelectedKey] = useState('');
+    const [init, setInit] = useState(false);
+    const platform = usePlatform();
+    const tabsData = useMemo(() => {
+        return getMenuList(props.tabs);
+    }, [props.tabs]);
+    const setSelectTab = useCallback(({ key, isNavigate = true, } = {}) => {
+        const selectItem = findSelectItem(tabsData || [], key);
+        if (!selectItem) {
+            setInit(true);
+            return;
+        }
+        setSelectedKey(key || selectItem.key);
+        if (key && selectedKey !== key) {
+            // eslint-disable-next-line rulesdir/no-timer
+            setTimeout(() => {
+                var _a;
+                (_a = props.events) === null || _a === void 0 ? void 0 : _a.change({ tab: selectItem });
+            }, 0);
+            isNavigate && navigateTo(selectItem, props.routeType);
+        }
+        setInit(true);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [tabsData, props.routeType]);
+    useEffect(() => {
+        setSelectTab();
+    }, [setSelectTab]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            tabs: tabsData,
+            selectedTab: tabsData.find((item) => item.key === selectedKey),
+            setSelectTab,
+        };
+    }, [tabsData, selectedKey, setSelectTab]);
+    const getIconShow = (item, selectedKey, isInit) => {
+        var _a;
+        if (!item.iconUrl && !item.selectedIconPath && !item.iconPath)
+            return null;
+        // 自定义图标不控制一下初始化，图片切换太快可能会闪动
+        if (!isInit && item.selectedIconPath)
+            return null;
+        // 预置图标
+        if (item.iconUrl) {
+            return (_jsx(WdIcon, { name: item.iconUrl, src: item.iconUrl, type: ((_a = item.iconUrl) === null || _a === void 0 ? void 0 : _a.startsWith('http')) ? 'custom' : 'inner' }));
+        }
+        return (_jsx(WdIcon, { name: selectedKey === item.key ? item.selectedIconPath : item.iconPath, src: selectedKey === item.key ? item.selectedIconPath : item.iconPath, type: 'custom' }));
+    };
+    const getTitleShow = (item, isInit) => {
+        var _a;
+        const show = (_jsxs(_Fragment, { children: [_jsx("div", { className: `${classPrefix}-tabbar__item-icon`, children: getIconShow(item, selectedKey, isInit) }), _jsx("div", { className: `${classPrefix}-tabbar__item-text`, children: item.title })] }));
+        const url = (item === null || item === void 0 ? void 0 : item.type) === 'link' && item.linkUrl
+            ? item.linkUrl
+            : (_a = item === null || item === void 0 ? void 0 : item.path) === null || _a === void 0 ? void 0 : _a.replace('/', '');
+        return url ? (_jsx(WdLink, { style: { color: 'unset', fontSize: 'unset' }, packageName: item === null || item === void 0 ? void 0 : item.subPackageName, url: url, params: [], disabled: true, contentSlot: show, content: '' })) : (show);
+    };
+    return (_jsx("div", { id: props.id, style: props.style, className: classNames(`${classPrefix}-tabbar`, `${classPrefix}-${platform}-tabbar`, props.className), "data-testid": "wd-tabbar-test", children: tabsData.map((item) => (_jsx("div", { "data-testid": "wd-tabbar-node", className: `${classPrefix}-tabbar__item ${selectedKey === item.key ? 'is-selected' : ''}`, onClick: () => {
+                var _a;
+                (_a = props.events) === null || _a === void 0 ? void 0 : _a.tap();
+                if (item.disabled || selectedKey === item.key)
+                    return;
+                setSelectedKey(item.key);
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    var _a;
+                    (_a = props.events) === null || _a === void 0 ? void 0 : _a.change({ tab: item });
+                }, 0);
+                navigateTo(item, props.routeType);
+            }, children: getTitleShow(item, init) }, item.key))) }));
+});

package/dist/web/components/wd-table/components/ExportFileModalByApi/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * 后端导出弹窗
  */

package/dist/web/components/wd-table/components/FieldRender/Form/Enum.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const EnumSelect: (props: any) => JSX.Element;
 export declare const formatEnum: (value: any, field: any, enumOptions: any) => any;
 export declare const EnumView: (props: any) => any;

package/dist/web/components/wd-table/components/FieldRender/Form/Location.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style';
 export declare const locationProperties: {
     address: {

package/dist/web/components/wd-table/components/FieldRender/ImagePreview.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ImagePreview: ({ srcList }: {
     srcList: any;
 }) => JSX.Element;

package/dist/web/components/wd-table/components/FieldRender/QuoteModal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * 引用类型显示弹窗
  * @description 使用组件方式编写，避免数据流中断

package/dist/web/components/wd-table/components/FieldRender/UserDepartment/ViewCell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style';
 export declare const ViewCell: ({ data, showType, relation }: {
     data: any;

package/dist/web/components/wd-table/components/FieldRender/UserDepartment/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const parentIcon: ({ expanded }: {
     expanded: any;
 }) => JSX.Element;

package/dist/web/components/wd-table/components/FieldRender/VideoPreview.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const VideoPreview: (props: {
+    value: string | string[];
+}) => JSX.Element;
+export declare function VideoItem(props: {
+    url: string;
+}): JSX.Element;

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import WedaVideo from '../../../wedaVideo';
+import WdImage from '../../../wd-image';
+import { WdIcon } from '../../../wd-icon';
+import { useConfig } from '../../../../utils/config-context';
+import { useTempUrl } from '../../../../utils/hooks/use-cloud-id-temp-url';
+import { usePlatform } from '../../../../utils/platform';
+import { Modal, ConfigProvider } from 'tea-component';
+// 单个/多个视频预览
+export const VideoPreview = (props) => {
+    const { value } = props;
+    const { classPrefix } = useConfig();
+    const urls = useMemo(() => [].concat(value), [value]);
+    if (value == null) {
+        return null;
+    }
+    return (_jsx("div", { className: `${classPrefix}-table-video-preview-list`, children: urls.map((url, i) => (_jsx(VideoItem, { url: url }, `${url}-${i}`))) }));
+};
+// 单个视频预览
+export function VideoItem(props) {
+    const size = usePlatform() === 'h5' ? '100%' : 'l';
+    const { classPrefix } = useConfig();
+    const { url } = props;
+    const { data: realSrc } = useTempUrl(url); // 视频临时地址
+    const [imgSrc, setImgSrc] = useState(''); // 第一帧图片地址
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        getVideoBase64(realSrc).then((d) => setImgSrc(d));
+    }, [realSrc]);
+    const getPopupContainer = () => {
+        let popup = document.querySelector('#wd-table-video-preview');
+        if (!popup) {
+            popup = document.createElement('div');
+            popup.setAttribute('id', 'wd-table-video-preview');
+            document.body.appendChild(popup);
+        }
+        return popup;
+    };
+    const handleClick = (e) => {
+        setVisible(true);
+        e.stopPropagation();
+    };
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: `${classPrefix}-table-video-preview`, onClick: handleClick, title: url, children: [imgSrc && (_jsx(WdImage, { className: `${classPrefix}-table-video-preview__img`, src: imgSrc, maskClosable: false, alt: "", imgPreview: false, lazyLoad: false })), !imgSrc && (_jsx("div", { className: `${classPrefix}-table-video-preview__img--error` })), _jsx(WdIcon, { name: "td:play-circle", className: `${classPrefix}-table-video-preview__icon` }), _jsx(Modal, { className: `${classPrefix}-table-video-preview__modal`, visible: visible, size: size, destroyOnClose: true, maskClosable: true, popupContainer: () => getPopupContainer(), onClose: () => setVisible(false), children: _jsx(Modal.Body, { children: _jsx(WedaVideo, { videoDataSource: realSrc, autoPlay: true, controlBarStatus: true }) }) })] }) }));
+}
+// 取视频第一帧图片
+function getVideoBase64(url) {
+    return new Promise(function (resolve) {
+        const video = document.createElement('video');
+        video.setAttribute('crossOrigin', 'anonymous');
+        video.setAttribute('src', url);
+        video.setAttribute('width', '400px');
+        video.setAttribute('height', '240px');
+        video.setAttribute('preload', 'auto');
+        video.currentTime = 0;
+        video.addEventListener('loadeddata', function () {
+            const canvas = document.createElement('canvas');
+            const width = video.width;
+            const height = video.height;
+            canvas.width = width;
+            canvas.height = height;
+            canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+            const dataURL = canvas.toDataURL('image/jpeg');
+            resolve(dataURL);
+        });
+    });
+}

package/dist/web/components/wd-table/components/FieldRender/index.d.ts

@@ -13,10 +13,11 @@ export declare function getFieldRender(field?: any, extra?: any): (val: any) =>
 /**
  * object类型，展示表单组件
  */
-export declare const DataItemView: ({ fields, modelType, value }: {
+export declare const DataItemView: ({ fields, modelType, value, isH5 }: {
     fields: any;
     modelType: any;
     value: any;
+    isH5: any;
 }) => JSX.Element;
 /**
  * object，展示表格组件
@@ -99,8 +100,8 @@ export declare const formatDataToXlsx: (datas: any, fields: any, enumOptions?: {
  * 3、枚举/数字需要特殊处理
  */
 export declare const getSearchAttributes: (fields: any) => any;
-export declare const getFieldValue: (name: any, _record: any, relatedField?: any) => any;
-export declare const slotRender: (slot: any, props?: {}) => any;
+export declare const getFieldValue: (name: any, _record: any, relatedFieldName?: any, isManyField?: any) => any;
+export declare const slotRender: (Slot: any, props?: {}) => any;
 /**
  * 根据列管理，过滤表格列信息
  * columns: { key, header, width, align, render,fixed }[] Tea Table 的列

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable */
 import React, { useMemo, useRef } from 'react';
-import { useMediaQuery } from '@react-hookz/web';
 import fromEntries from 'object.fromentries';
 import { Modal, Table, Form, ConfigProvider } from 'tea-component';
 import { formatTimeByType } from '../../../../utils/date';
-import { safeJsonParse, isValueEmpty } from '../../../../utils/tool';
+import { safeJsonParse, isValueEmpty, isObj } from '../../../../utils/tool';
 import Location, { locationProperties } from './Form/Location';
 import { EnumView, formatEnum } from './Form/Enum';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -18,8 +17,10 @@ import { getPrimaryField } from '../../../../utils/datasource';
 import { useConfig } from '../../../../utils/config-context';
 import { EnumHoc } from '../../../../utils/hooks/EnumHoc';
 import { ImagePreview } from './ImagePreview';
+import { VideoPreview } from './VideoPreview';
 import { ModalTable } from '../ModalTable';
 import { getWhereParam } from '../../utils';
+import lodashGet from 'lodash.get';
 const MODAL_SIZE = '80%';
 // 文字提示框包裹组件
 export const TextWrap = React.memo(function TextWrapComp(props) {
@@ -36,7 +37,7 @@ export const TextWrap = React.memo(function TextWrapComp(props) {
 export function getFieldRender(field = {}, extra = {}) {
     var _a;
     const { type, format, items, properties, title, parentDatasource } = field;
-    const { modelType, showTip = true, detailText = '详情' } = extra;
+    const { modelType, showTip = true, detailText = '详情', isH5 } = extra;
     const textProps = { showTip };
     // 枚举-旧，新版 TODO
     if ((_a = field['x-enumObj']) === null || _a === void 0 ? void 0 : _a.length) {
@@ -78,7 +79,7 @@ export function getFieldRender(field = {}, extra = {}) {
                         properties: locationProperties,
                     },
                 };
-                return (_jsx(ArrayComponent, { value: value, modelType: modelType, field: locationField, items: items }));
+                return (_jsx(ArrayComponent, { isH5: isH5, value: value, modelType: modelType, field: locationField, items: items }));
             }
             if (modelType === 'table') {
                 const content = (_a = formatLocationData(val)) === null || _a === void 0 ? void 0 : _a.flatContent;
@@ -101,7 +102,7 @@ export function getFieldRender(field = {}, extra = {}) {
                     });
                 };
                 fieldValue = val;
-                return modelType === 'detail' ? (_jsx(RichTextView, { value: fieldValue })) : (_jsx("a", { onClick: (e) => {
+                return modelType === 'detail' ? (_jsx(RichTextView, { value: fieldValue })) : (_jsx("a", { className: "wd-table__a", onClick: (e) => {
                         e.stopPropagation();
                         showRichText(fieldValue);
                     }, children: detailText }));
@@ -126,7 +127,7 @@ export function getFieldRender(field = {}, extra = {}) {
             }
             else if (format === 'url') {
                 // 网址
-                return (_jsx("a", { target: "_blank", href: fieldValue, rel: "noreferrer", children: _jsx(TextWrap, { ...textProps, children: fieldValue }) }));
+                return (_jsx("a", { className: "wd-table__a", target: "_blank", href: fieldValue, rel: "noreferrer", children: _jsx(TextWrap, { ...textProps, children: fieldValue }) }));
             }
             else if ((extra === null || extra === void 0 ? void 0 : extra.supportManyRelated) &&
                 (format === 'father-son' || format === 'related')) {
@@ -137,6 +138,10 @@ export function getFieldRender(field = {}, extra = {}) {
                 }
                 return (_jsx(TextWrap, { ...textProps, children: fieldValue[relatedField] || fieldValue[primaryField] || '-' }));
             }
+            else if (format === 'x-video') {
+                // 视频
+                return _jsx(VideoPreview, { value: fieldValue });
+            }
             else {
                 return _jsx(TextWrap, { ...textProps, children: fieldValue });
             }
@@ -152,12 +157,12 @@ export function getFieldRender(field = {}, extra = {}) {
         else if (type === 'object') {
             const objectRender = ({ value, modelType, fields }) => {
                 if (typeof val === 'object') {
-                    return (_jsx(DataItemView, { value: value, modelType: modelType, fields: fields }));
+                    return (_jsx(DataItemView, { value: value, modelType: modelType, fields: fields, isH5: isH5 }));
                 }
                 return _jsx(TextWrap, { ...textProps, children: value });
             };
             fieldValue = safeJsonParse(val);
-            if ((field === null || field === void 0 ? void 0 : field.format) === 'x-location') {
+            if (format === 'x-location') {
                 return xLocationRender(fieldValue, modelType);
             }
             else if (modelType === 'detail') {
@@ -167,9 +172,9 @@ export function getFieldRender(field = {}, extra = {}) {
                     fields: properties,
                 });
             }
-            else if ((field === null || field === void 0 ? void 0 : field.format) === 'many-one' ||
-                (field === null || field === void 0 ? void 0 : field.format) === 'one-one' ||
-                (field === null || field === void 0 ? void 0 : field.format) === 'one-one-r') {
+            else if (format === 'many-one' ||
+                format === 'one-one' ||
+                format === 'one-one-r') {
                 const primaryField = ((_e = (_d = field === null || field === void 0 ? void 0 : field.parentDatasource) === null || _d === void 0 ? void 0 : _d.schema) === null || _e === void 0 ? void 0 : _e['x-primary-column']) || '';
                 const relatedField = (_f = extra === null || extra === void 0 ? void 0 : extra.columnSet) === null || _f === void 0 ? void 0 : _f.relatedField;
                 return (_jsx(TextWrap, { ...textProps, children: fieldValue[relatedField] || fieldValue[primaryField] }));
@@ -199,6 +204,10 @@ export function getFieldRender(field = {}, extra = {}) {
                 // 图片数组
                 return xImageRender(fieldValue);
             }
+            else if ((items === null || items === void 0 ? void 0 : items.format) === 'x-video') {
+                // 视频数组
+                return _jsx(VideoPreview, { value: fieldValue });
+            }
             else if ((items === null || items === void 0 ? void 0 : items.format) === 'x-file' && (extra === null || extra === void 0 ? void 0 : extra.modelType) === 'detail') {
                 // 文件数组，在详情页和表格页展示不同
                 return _jsx(UploaderFileView, { value: fieldValue, single: false });
@@ -227,7 +236,6 @@ export function getFieldRender(field = {}, extra = {}) {
                         : [primaryField] || [],
                 };
                 const whereList = getWhereParam(relatedKey, rowId);
-                const isH5 = useMediaQuery('(max-width: 768px)');
                 const modalSize = isH5 ? 'auto' : 'l';
                 if (format === 'many-many') {
                     const strRef = useRef(null);
@@ -250,7 +258,7 @@ export function getFieldRender(field = {}, extra = {}) {
             }
             else {
                 fieldValue = safeJsonParse(val);
-                return (_jsx(ArrayComponent, { value: fieldValue, field: field, modelType: modelType, items: items }));
+                return (_jsx(ArrayComponent, { isH5: isH5, value: fieldValue, field: field, modelType: modelType, items: items }));
             }
         }
         return _jsx("span", { children: JSON.stringify(fieldValue) });
@@ -260,12 +268,12 @@ export function getFieldRender(field = {}, extra = {}) {
 /**
  * object类型，展示表单组件
  */
-export const DataItemView = ({ fields, modelType, value }) => {
-    const isH5 = useMediaQuery('(max-width: 768px)');
+export const DataItemView = ({ fields, modelType, value, isH5 }) => {
     return (_jsx(Form, { readonly: true, className: isH5 ? 'tea-form--vertical' : '', children: Object.entries(fields).map(([key, field]) => {
             const fieldRender = getFieldRender(field, {
                 showTip: false,
                 modelType,
+                isH5,
             });
             return (_jsx(Form.Item, { label: field.title, children: _jsx(Form.Text, { children: fieldRender(value === null || value === void 0 ? void 0 : value[(field === null || field === void 0 ? void 0 : field.name) || key]) }) }, key));
         }) }));
@@ -292,8 +300,7 @@ export const DataTableView = ({ fields, value }) => {
 /**
  * array类型，展示组件
  */
-const ArrayComponent = ({ items, modelType, value, field }) => {
-    const isH5 = useMediaQuery('(max-width: 768px)');
+const ArrayComponent = ({ items, modelType, value, field, isH5 }) => {
     // PC端 数组嵌套子对象时，显示为表格
     if (items.type === 'object' && !isH5) {
         if (modelType === 'detail') {
@@ -307,6 +314,7 @@ const ArrayComponent = ({ items, modelType, value, field }) => {
                 const itemRender = getFieldRender(items, {
                     modelType,
                     detailText: value.length < 2 ? '详情' : `详情${index + 1}`,
+                    isH5,
                 });
                 return (_jsx("div", { className: "field-array-item", children: itemRender(item) }, index));
             })) }));
@@ -388,11 +396,13 @@ const TableCell = ({ record, field, isH5, supportManyRelated }) => {
                 showTip: false,
                 relation: record[`@${name}`],
                 supportManyRelated,
+                isH5,
             }
             : {
                 modelType: 'table',
                 relation: record[`@${name}`],
                 supportManyRelated,
+                isH5,
             };
         return getFieldRender(field, extra)(value);
     }, [record, field, isH5]);
@@ -428,6 +438,7 @@ export const getFieldWidth = (field) => {
         string: {
             default: 120,
             'x-image': 100,
+            'x-video': 100,
             'x-file': 150,
         },
         number: {
@@ -444,6 +455,7 @@ export const getFieldWidth = (field) => {
         array: {
             default: 120,
             'x-image': 230,
+            'x-video': 230,
             'x-file': 150,
         },
     };
@@ -644,29 +656,40 @@ export const getSearchAttributes = (fields) => fields
     }
     return config;
 });
-export const getFieldValue = (name, _record, relatedField) => {
-    var _a, _b, _c;
+export const getFieldValue = (name, _record, relatedFieldName, isManyField) => {
+    var _a;
     const record = getPrimaryField(_record);
     if (name === '_departmentList')
         return (((_a = record === null || record === void 0 ? void 0 : record['##SHOW']) === null || _a === void 0 ? void 0 : _a._departmentList) || []).join(',');
-    if (relatedField) {
-        return (_c = (_b = record[`@${name}`]) === null || _b === void 0 ? void 0 : _b.v1) === null || _c === void 0 ? void 0 : _c.record;
+    if (relatedFieldName) {
+        const v1 = lodashGet(record, `@${name}.v1.record.${relatedFieldName}`);
+        const relatedValue = lodashGet(record, name);
+        let v2;
+        if (Array.isArray(relatedValue) && isManyField) {
+            v2 = relatedValue.map((item) => lodashGet(item, relatedFieldName));
+        }
+        else {
+            v2 = lodashGet(relatedValue, relatedFieldName);
+        }
+        return v2 !== undefined ? v2 : v1;
     }
     return record[name];
 };
-export const slotRender = (slot, props = {}) => typeof slot === 'function' ? slot(props) : slot;
+export const slotRender = (Slot, props = {}) => {
+    if (typeof Slot === 'function') {
+        // console.log(Slot, 'slot', props, 'props');
+        return _jsx(Slot, { ...props });
+    }
+    return Slot !== null && Slot !== void 0 ? Slot : null;
+};
 const TableSlotCell = ({ record, rowKey, recordIndex, column, columnIndex, slot, }) => {
-    const component = React.useMemo(() => {
-        // 计算单元格的值
-        return slotRender(slot, {
-            record,
-            rowKey,
-            recordIndex,
-            column,
-            columnIndex,
-        });
-    }, [record, rowKey, recordIndex, column, columnIndex]);
-    return _jsx(_Fragment, { children: component });
+    return slotRender(slot, {
+        record,
+        rowKey,
+        recordIndex,
+        column,
+        columnIndex,
+    });
 };
 /**
  * 根据列管理，过滤表格列信息
@@ -709,9 +732,10 @@ export const filterCustomColumns = ({ columns, columnSets, slots, fields, isH5,
         return acc;
     }, {});
     return columnSetsReg.map((item2) => {
-        var _a;
         const { key, header, genre, fixed, relatedField } = item2;
-        const field = fields.find((el) => key === el.name);
+        const _oriField = fields.find((el) => key === el.name); // 1、原始字段
+        const _relField = getRelatedField(_oriField, relatedField, supportManyRelated) || _oriField; // 2、关联关系字段
+        const field = getCustomField(_relField, item2); // 3、自定义数据类型字段;
         // 处理渲染错误
         const render = (record) => {
             const extra = isH5
@@ -722,6 +746,7 @@ export const filterCustomColumns = ({ columns, columnSets, slots, fields, isH5,
                     columnSet: item2,
                     rowId: record._id,
                     supportManyRelated,
+                    isH5,
                 }
                 : {
                     modelType: 'table',
@@ -729,16 +754,16 @@ export const filterCustomColumns = ({ columns, columnSets, slots, fields, isH5,
                     columnSet: item2,
                     rowId: record._id,
                     supportManyRelated,
+                    isH5,
                 };
-            const value = getFieldValue(key, record, relatedField);
+            const value = getFieldValue(key, record, relatedField, isMany(_oriField));
             const component = getFieldRender(field, extra)(value);
             return (_jsx(ErrorBoundary, { FallbackComponent: () => _jsx("span", { className: "", children: "\u274C \u6570\u636E\u5F02\u5E38" }), children: component }));
         };
+        const _oriWidth = getFieldWidth(field) + 10;
         const isIllegalWidth = typeof (item2 === null || item2 === void 0 ? void 0 : item2.width) !== 'number';
         item2.width =
-            (item2 === null || item2 === void 0 ? void 0 : item2.widthType) === 'auto' || isIllegalWidth
-                ? ((_a = columnsMap === null || columnsMap === void 0 ? void 0 : columnsMap[key]) === null || _a === void 0 ? void 0 : _a.width) || 120
-                : item2 === null || item2 === void 0 ? void 0 : item2.width;
+            (item2 === null || item2 === void 0 ? void 0 : item2.widthType) === 'auto' || isIllegalWidth ? _oriWidth : item2 === null || item2 === void 0 ? void 0 : item2.width;
         // 拿到自定义列属性值
         const customColumn = {
             ...columnsMap[key],
@@ -756,6 +781,46 @@ export const filterCustomColumns = ({ columns, columnSets, slots, fields, isH5,
         return customColumn;
     });
 };
+// 获取列管理绑定的关联字段，一对多/多对多，将字段当成数组来展示
+const getRelatedField = (field, relatedFieldName, supportManyRelated) => {
+    if (supportManyRelated && relatedFieldName) {
+        let _field = lodashGet(field, `parentDatasource.schema.properties.${relatedFieldName}`);
+        if (isMany(field) && isObj(_field)) {
+            _field = { ..._field, type: 'array', items: _field };
+        }
+        return _field;
+    }
+};
+// 是否为一对多/多对多字段
+const isMany = (field) => isObj(field) && ['one-many', 'many-many'].includes(field.format);
+const CUSTOM_TYPE_MAP = {
+    text: { type: 'string', format: '' },
+    rtf: { type: 'string', format: 'x-rtf' },
+    url: { type: 'string', format: 'url' },
+    image: { type: 'string', format: 'x-image' },
+    video: { type: 'string', format: 'x-video' },
+    file: { type: 'string', format: 'x-file' },
+};
+// 自定义数据类型
+const getCustomField = (_field, columnSet) => {
+    try {
+        const { customType, customArrayItem, customJson } = columnSet;
+        let customField = {};
+        if (customType === 'json') {
+            customField = isObj(customJson) ? customJson : {};
+        }
+        else if (customType === 'array') {
+            const items = CUSTOM_TYPE_MAP[customArrayItem] || CUSTOM_TYPE_MAP.text;
+            customField = { type: 'array', format: '', items };
+        }
+        else {
+            customField = CUSTOM_TYPE_MAP[customType] || {};
+        }
+        return { ..._field, ...customField };
+    }
+    catch (e) { }
+    return _field;
+};
 /**
  * 过滤字段列表
  * 导出/搜索框，不展示自定义列

package/dist/web/components/wd-table/components/FilterFieldsPanel/Fields.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectSearch } from './SelectSearch';
 export { SelectSearch };
 export declare const DatePickerField: ({ disabled, showTime, isRange, updateValue, value, }: {

package/dist/web/components/wd-table/components/FilterFieldsPanel/FilterFieldItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const FilterFieldItem: ({ updateFilterData, ...filterFieldItemConfig }: {
     [x: string]: any;
     updateFilterData: any;