@cloudbase/weda-ui 3.5.2 → 3.6.0

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

@@ -1,51 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import classNames from '../../utils/classnames';
-import { useConfig } from '../../utils/config-context';
-import { WdButton, WdImage, WdIcon, WdRadioList,
-// WdInputWrap,
- } from '../index';
-import { WdLoading } from '../wd-loading';
-import { usePlatform } from '../../utils/platform';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from 'react';
+import { useFormInputTrait } from '../../components/form-input-hooks';
 import { WdFormItem } from '../wd-form-item';
-import { ConfigProvider, Modal } from 'tea-component';
-const FormItemMockData = {
-    classRoot: 'upload',
-    labelVisible: true,
-    label: '图片上传',
-    testId: 'form-upload-image',
-    borderedPc: true,
-    layout: 'horizontal',
-    // layout: 'vertical',
-};
-export const WdUploadImage = () => {
-    const { classPrefix } = useConfig();
-    const platform = usePlatform();
-    const ish5 = platform === 'h5';
-    const compClassName = `${classPrefix}-upload-wrap  ${classPrefix}-upload-file-wrap`;
-    const [isShowDialog, setIsShowDialog] = React.useState(false);
-    // 待删，为组件 ts 不报错
-    const extra = {};
-    return (_jsx(_Fragment, { children: _jsxs(WdFormItem, { ...FormItemMockData, children: [_jsxs("div", { className: classNames(compClassName), children: [_jsx("p", { className: "wd-form-item__help", children: _jsx("span", { className: "wd-form-item__help-text wd-input__help", children: "\u6700\u591A\u4E0A\u4F2010\u5F20\u56FE\u7247\uFF0C\u5355\u4E2A\u56FE\u7247\u6700\u592710m\uFF0C\u652F\u6301\u683C\u5F0F\u5982\u4E0B\uFF1Apng\u3001jpeg" }) }), _jsxs("ul", { className: `${classPrefix}-upload__control ${classPrefix}-upload__control-image `, children: [_jsx("li", { className: `${classPrefix}-upload__item-image ${classPrefix}-upload__item-image--add`, onClick: () => {
-                                        setIsShowDialog(true);
-                                    }, children: _jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdIcon, { name: "td:add", size: "md" }) }) }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsxs("p", { className: `${classPrefix}-upload__image-box`, children: [_jsx(WdImage, { src: "https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg", ...extra }), !ish5 && (_jsx("div", { className: `${classPrefix}-upload__image-box-mask`, children: _jsxs("div", { className: `${classPrefix}-upload__image-box-mask__control`, children: [_jsx(WdIcon, { name: "td:browse" }), _jsx("span", { className: `${classPrefix}-upload__image-line` }), _jsx(WdIcon, { name: "td:delete" })] }) }))] }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box`, children: _jsx(WdLoading, { text: ish5 ? '上传中...' : '上传中 40%' }) }), !ish5 ? (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" })) : (_jsx(WdIcon, { className: `${classPrefix}-upload__image-close`, name: "td:close", size: "sm" }))] }), _jsxs("li", { className: `${classPrefix}-upload__item-image`, children: [_jsx("p", { className: `${classPrefix}-upload__image-box `, children: _jsx(WdLoading, { text: ish5 ? ('请重试') : (_jsxs(_Fragment, { children: ["\u683C\u5F0F\u9519\u8BEF\uFF0C\u8BF7", _jsx("span", { className: `${classPrefix}-g-text-refresh`, children: "\u91CD\u8BD5" })] })), icon: ish5 ? (_jsx(WdIcon, { name: "td:refresh", size: "md" })) : (_jsx(WdIcon, { name: "td:error-circle-filled", size: "md" })) }) }), !ish5 && (_jsx("p", { className: `${classPrefix}-upload__image-name`, children: "\u56FE\u7247\u540D\u79F0" }))] })] })] }), _jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs(Modal, { className: `${classPrefix}-upload-dialog `, visible: isShowDialog, caption: "\u4E0A\u4F20\u56FE\u7247", onClose: () => {
-                            setIsShowDialog(false);
-                        }, children: [_jsx(Modal.Body, { children: _jsxs("div", { className: `${classPrefix}-upload-dialog__control `, children: [_jsx(WdRadioList, { status: '', required: false, format: '', labelWidth: '', labelAlign: '', labelWrap: false, labelTips: '', extra: '', borderedH5: false, requiredFlag: false, requiredMsg: '', tipBlock: '', enumName: '', ...{ $widget: { closest: () => { } } }, labelVisible: true, layout: 'horizontal', label: '上传方式', direction: 'inline', range: [
-                                                {
-                                                    label: '点击上传/拖拽',
-                                                    value: '1',
-                                                },
-                                                {
-                                                    label: '输入链接上传',
-                                                    value: '2',
-                                                },
-                                            ], name: "demo", size: 'md', value: '1' }), _jsx("div", { className: `${classPrefix}-upload-dialog__click-upload-box`, children: _jsxs("p", { children: [_jsx("span", { className: `${classPrefix}-upload-dialog__click-upload`, children: "\u70B9\u51FB\u4E0A\u4F20" }), ' ', "/ \u62D6\u62FD"] }) })] }) }), _jsxs(Modal.Footer, { children: [_jsx(WdButton, { text: "\u53D6\u6D88", size: "md", theme: "secondary", events: {
-                                            tap: () => {
-                                                setIsShowDialog(false);
-                                            },
-                                        } }), _jsx(WdButton, { text: "\u786E\u5B9A", size: "md", theme: "primary", events: {
-                                            tap: () => {
-                                                setIsShowDialog(false);
-                                            },
-                                        } })] })] }) })] }) }));
-};
+import Uploader from '../form/uploader';
+import { emptyObject } from '../../utils/constant';
+import { convertSingleValue } from '../../utils/tool';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+import './style';
+/**
+ * 图片上传-标准化
+ */
+export const WdUploadImage = forwardRef(function WdUploadImage(props, ref) {
+    const { classRoot = 'upload-image', showShape = X_RUNTIME_DEFAULT.showShape, acceptTypes = X_RUNTIME_DEFAULT.acceptTypes, maxSize = X_RUNTIME_DEFAULT.maxSize, single = X_RUNTIME_DEFAULT.single, maxUploadCount = X_RUNTIME_DEFAULT.maxUploadCount, events = emptyObject, isCompressBeforeUpload = false, 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    compressQuality = 70, compressedHeight = 0, compressedWidth = 0, sourceType = 'both', tips, callbacks, } = props;
+    // 强制转换初始值
+    const initRef = useRef(false);
+    const formValue = useMemo(() => {
+        if (initRef.current)
+            return props.value;
+        initRef.current = true;
+        return convertSingleValue(props.value, single);
+    }, [props.value, single]);
+    const traitProps = { ...props, value: formValue, inputRef: ref };
+    const trait = useFormInputTrait(traitProps);
+    const { value, onChange, disabled, readOnly, visible } = trait;
+    const formItemProps = {
+        ...props,
+        ...trait,
+        classRoot,
+        readOnly: false,
+        size: 'lg',
+    };
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(Uploader, { events: events, labelVisible: false, acceptTypes: acceptTypes, defaultValue: value, maxSize: maxSize, maxUploadCount: maxUploadCount, single: single, tips: tips, showShape: showShape, readOnly: readOnly, disabled: disabled, decorator: null, onChange: onChange, isCompressBeforeUpload: isCompressBeforeUpload, compressQuality: compressQuality, compressedHeight: compressedHeight, compressedWidth: compressedWidth, sourceType: sourceType, callbacks: callbacks }) }));
+});

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

@@ -24,7 +24,7 @@
 }
 
 .vjs-slider-vertical .vjs-volume-level:before {
-  left: -0.5em !important;
+  left: -0.4em !important;
 }
 
 .weda-ui_video__video-loading {

package/dist/web/components/wedaVideo/index.d.ts

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import type { CommonPropsType } from '../../types';
+import React from 'react';
+import type { CommonPropsType, unknownFunction } from '../../types';
+import type { DataType } from '../../../configs/components/wedaVideo';
 import './style';
 export interface VideoProps {
     videoDataSource: string;
@@ -11,6 +12,21 @@ export interface VideoProps {
     startTime: number;
     endTime: number;
 }
-export type WedaVideoProps = Partial<CommonPropsType & VideoProps>;
-declare const WedaVideo: React.FC<WedaVideoProps>;
+export interface WedaVideoProps extends CommonPropsType, DataType {
+    [handlers: `on${string}`]: unknownFunction;
+}
+declare const WedaVideo: React.ForwardRefExoticComponent<WedaVideoProps & React.RefAttributes<TCompRef>>;
 export default WedaVideo;
+type TCompRef = {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    seek: (params: {
+        position: number;
+    }) => void;
+    playbackRate: (params: {
+        rate: number;
+    }) => void;
+    requestFullScreen: () => void;
+    exitFullScreen: () => void;
+};

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { useEffect, useRef, useMemo, useState, forwardRef } from 'react';
 import videojs from 'video.js';
 import { usePlatform, isCloudFileID, isInIde } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import { ConfigProvider, Icon } from 'tea-component';
 import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 import './style';
-const { useEffect, useRef, useMemo, useState } = React;
 const MimetypesKind = {
     opus: 'video/ogg',
     ogv: 'video/ogg',
@@ -30,7 +30,7 @@ const MimetypesKind = {
     webp: 'image/webp',
 };
 const CLASS_PREFIX = 'weda-ui_video';
-const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPlay, loopPlay, mutePlay, controlBarStatus, startTime, endTime, }) => {
+const WedaVideo = forwardRef(function WedaVideo({ className, style, id, videoDataSource, posterImage = '', autoPlay = false, loopPlay = false, mutePlay = false, controlBarStatus = true, startTime = 0, endTime, objectFit = 'contain', showCenterPlayBtn = true, events, }, ref) {
     const platform = usePlatform();
     const cls = classNames({
         [className]: className,
@@ -42,6 +42,7 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
     const playerRef = useRef(null);
     const [videoModalStatus, setVideoModalStatus] = useState(true);
     const [videoErrMsg, setVideoErrMsg] = useState('');
+    const [videoHasLoad, setVideoHasLoad] = useState(false);
     const { data: realPosterImage } = useTempUrl(posterImage);
     const { data: realSrc, error } = useTempUrl(videoDataSource);
     const videoType = useMemo(() => {
@@ -52,12 +53,13 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
         setVideoErrMsg('获取云文件资源失败');
     }
     useEffect(() => {
+        var _a, _b;
         const videoElement = videoRef.current;
         if (!playerRef.current) {
             const videoOptions = {
                 poster: realPosterImage,
                 autoplay: autoPlay,
-                bigPlayButton: true,
+                bigPlayButton: showCenterPlayBtn,
                 loop: loopPlay,
                 muted: mutePlay,
                 controls: controlBarStatus,
@@ -86,11 +88,15 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
                     : [],
             };
             playerRef.current = videojs(videoElement, videoOptions, () => {
-                players.currentTime(startTime); //指定播放时间
                 setVideoModalStatus(false);
                 setVideoErrMsg('');
             });
             const players = playerRef.current;
+            // 暴露视频相关事件
+            processVideoJSEvents(players, events);
+            players.on('canplay', () => {
+                setVideoHasLoad(true);
+            });
             // 指定结束时间
             if (endTime) {
                 players.on('timeupdate', () => {
@@ -124,6 +130,10 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
                 setVideoModalStatus(true);
             });
         }
+        else if (realPosterImage) {
+            // 视频封面配置改变后，更新
+            (_b = (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.poster) === null || _b === void 0 ? void 0 : _b.call(_a, realPosterImage);
+        }
     }, [videoRef, realPosterImage]);
     useEffect(() => {
         // 切换视频源
@@ -138,6 +148,101 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
             playerRef.current.load(realSrc);
         }
     }, [realSrc]);
-    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 }))] }) }));
-};
+    useEffect(() => {
+        if (startTime && videoHasLoad && playerRef.current) {
+            playerRef.current.currentTime(startTime); //指定播放时间
+            autoPlay && playerRef.current.play();
+        }
+    }, [videoHasLoad, startTime, autoPlay]);
+    useSetWidgetApi(() => {
+        // https://docs.videojs.com/player#methods
+        const videoContext = playerRef.current;
+        return {
+            videoContext: videoContext,
+            play: () => videoContext === null || videoContext === void 0 ? void 0 : videoContext.play(),
+            pause: () => videoContext === null || videoContext === void 0 ? void 0 : videoContext.pause(),
+            stop: () => {
+                videoContext === null || videoContext === void 0 ? void 0 : videoContext.pause();
+                videoContext === null || videoContext === void 0 ? void 0 : videoContext.currentTime(0);
+            },
+            seek: ({ position }) => videoContext === null || videoContext === void 0 ? void 0 : videoContext.currentTime(position),
+            playbackRate: ({ rate }) => videoContext === null || videoContext === void 0 ? void 0 : videoContext.playbackRate(rate),
+            requestFullScreen: () => videoContext === null || videoContext === void 0 ? void 0 : videoContext.requestFullscreen(),
+            exitFullScreen: () => videoContext === null || videoContext === void 0 ? void 0 : videoContext.exitFullscreen(),
+        };
+    }, [playerRef.current], ref);
+    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, style: {
+                            objectFit,
+                        } }) }), videoModalStatus && (_jsx("div", { className: `${CLASS_PREFIX}__video-loading`, children: realSrc === null ? _jsx(Icon, { type: "loading" }) : videoErrMsg }))] }) }));
+});
+// 事件封装和暴露
+// https://docs.videojs.com/player#events
+function processVideoJSEvents(player, events) {
+    // ✅ 开始/继续播放
+    player.on('play', (e) => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.play) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e });
+    });
+    // ✅ 暂停播放
+    player.on('pause', (e) => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.pause) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e });
+    });
+    // ✅ 播放到末尾
+    player.on('ended', (e) => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.ended) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e });
+    });
+    // ✅ 播放进度变化
+    player.on('timeupdate', (e) => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.timeupdate) === null || _a === void 0 ? void 0 : _a.call(events, {
+            currentTime: player.currentTime(),
+            duration: player.duration(),
+        }, { originEvent: e });
+    });
+    // ✅ 全屏切换
+    player.on('fullscreenchange', (e) => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.fullscreenchange) === null || _a === void 0 ? void 0 : _a.call(events, {
+            fullScreen: player.isFullscreen(),
+            direction: 'vertical',
+        }, { originEvent: e });
+    });
+    // ✅ 视频缓冲
+    player.on('waiting', (e) => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.waiting) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e });
+    });
+    // ✅ 视频播放出错
+    player.on('error', (e) => {
+        var _a;
+        const err = player.error();
+        (_a = events === null || events === void 0 ? void 0 : events.error) === null || _a === void 0 ? void 0 : _a.call(events, err, { originEvent: e });
+    });
+    // ✅ 加载进度变化
+    player.on('progress', (e) => {
+        var _a;
+        // console.log(player.buffered());
+        const bufferedTimeRanges = player.buffered();
+        const duration = player.duration();
+        const bufferedEnd = bufferedTimeRanges.end(bufferedTimeRanges.length - 1);
+        const bufferedPercentage = (bufferedEnd / duration) * 100;
+        (_a = events === null || events === void 0 ? void 0 : events.progress) === null || _a === void 0 ? void 0 : _a.call(events, {
+            buffered: bufferedPercentage,
+        }, { originEvent: e });
+    });
+    // ✅ 视频元数据加载完成
+    player.on('loadedmetadata', (e) => {
+        var _a;
+        const duration = player.duration(); // 获取视频时长
+        const width = player.videoWidth(); // 获取视频宽度
+        const height = player.videoHeight(); // 获取视频高度
+        (_a = events === null || events === void 0 ? void 0 : events.loadedmetadata) === null || _a === void 0 ? void 0 : _a.call(events, {
+            width,
+            height,
+            duration,
+        }, { originEvent: e });
+    });
+}
 export default WedaVideo;

package/dist/web/utils/color.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 十六进制、rgba、rgb、hsl、hsla 都换算成 rgba
+ */
+export declare function colorToRgba(color: any, alpha?: number): any;
+export declare const TAG_BG_ALPHA = 0.1;
+export declare const COLORS: string[];

package/dist/web/utils/color.js

@@ -0,0 +1,81 @@
+/**
+ * 十六进制、rgba、rgb、hsl、hsla 都换算成 rgba
+ */
+export function colorToRgba(color, alpha = 1) {
+    try {
+        let r, g, b, a;
+        if (color.indexOf('#') === 0) {
+            // 十六进制表示法
+            if (color.length === 4) {
+                r = parseInt(color.substr(1, 1).repeat(2), 16);
+                g = parseInt(color.substr(2, 1).repeat(2), 16);
+                b = parseInt(color.substr(3, 1).repeat(2), 16);
+                a = 1;
+            }
+            else {
+                r = parseInt(color.substr(1, 2), 16);
+                g = parseInt(color.substr(3, 2), 16);
+                b = parseInt(color.substr(5, 2), 16);
+                a = parseInt(color.substr(7, 2), 16);
+                a = Number.isInteger(a) ? a / 100 : 1;
+            }
+        }
+        else if (color.indexOf('rgb') === 0) {
+            // RGB和RGBA表示法
+            const match = color.match(/(\d+),\s*(\d+),\s*(\d+)(,\s*([\d.]+))?/);
+            r = parseInt(match[1]);
+            g = parseInt(match[2]);
+            b = parseInt(match[3]);
+            a = match[5] ? parseFloat(match[5]) : 1;
+        }
+        else if (color.indexOf('hsl') === 0) {
+            // HSL和HSLA表示法
+            const match = color.match(/(\d+),\s*([\d.]+)%,\s*([\d.]+)%(,\s*([\d.]+))?/);
+            const h = parseInt(match[1]) / 360;
+            const s = parseInt(match[2]) / 100;
+            const l = parseInt(match[3]) / 100;
+            a = match[5] ? parseFloat(match[5]) : 1;
+            if (s === 0) {
+                r = g = b = l;
+            }
+            else {
+                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                const p = 2 * l - q;
+                r = hueToRgb(p, q, h + 1 / 3);
+                g = hueToRgb(p, q, h);
+                b = hueToRgb(p, q, h - 1 / 3);
+            }
+        }
+        a = a * alpha;
+        return `rgba(${r},${g},${b},${a})`;
+    }
+    catch (e) {
+        return color;
+    }
+}
+function hueToRgb(p, q, t) {
+    if (t < 0)
+        t += 1;
+    if (t > 1)
+        t -= 1;
+    if (t < 1 / 6)
+        return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+        return q;
+    if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+}
+// Tag 组件背景色
+export const TAG_BG_ALPHA = 0.1;
+// 标签随机颜色
+export const COLORS = [
+    '#0052D9',
+    '#2BA471',
+    '#E37318',
+    '#E34D59',
+    '#4D53E3',
+    '#15B3E4',
+    '#EAAC0E',
+    '#F22789',
+];

package/dist/web/utils/constant.d.ts

@@ -63,7 +63,6 @@ export declare const TABLE_SETTINGS: {
 export declare const TABLE_SLOT_PREFIX = "cell_";
 export declare const CELL_CUSTOM_OPTION = "cell__custom__option";
 export declare const GLOBAL_BUTTON = "globalButton";
-export declare const FORM_MAX_LENGTH = 140;
 export declare const KEY_DOWN_CODE = 13;
 export declare const getWhitelist: () => {
     whiteList: {
@@ -75,3 +74,13 @@ export declare const getWhitelist: () => {
     onTagAttr: (tag: any, name: any, value: any) => string;
     onIgnoreTagAttr: (tag: any, name: any, value: any) => string;
 };
+export declare const TAG_GAP: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const TAG_STYLE_TYPE: {
+    lightTick: string;
+    darkTick: string;
+    outlineTick: string;
+};

package/dist/web/utils/constant.js

@@ -130,7 +130,6 @@ export const TABLE_SLOT_PREFIX = 'cell_';
 export const CELL_CUSTOM_OPTION = 'cell__custom__option';
 // 表格全局按钮插槽名称
 export const GLOBAL_BUTTON = 'globalButton';
-export const FORM_MAX_LENGTH = 140;
 export const KEY_DOWN_CODE = 13;
 // 获取富文本白名单
 export const getWhitelist = () => {
@@ -241,3 +240,15 @@ export const getWhitelist = () => {
         },
     };
 };
+// 标签间距
+export const TAG_GAP = {
+    sm: '0.25rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+};
+// 标签类型样式合并
+export const TAG_STYLE_TYPE = {
+    lightTick: 'light',
+    darkTick: 'dark',
+    outlineTick: 'outline',
+};

package/dist/web/utils/datasource.d.ts

@@ -1,7 +1,10 @@
 export class DataSource {
     constructor(name: any);
     dbName: any;
-    getRecord(id: any): Promise<any>;
+    getRecord(id: any, { db, swr }?: {
+        db?: any;
+        swr?: {};
+    }): Promise<any>;
     getRecordList(params?: {}, { db, swr }?: {
         db?: any;
         swr?: {};
@@ -19,23 +22,24 @@ export class DataSource {
      */
     getConnect(method: any, params: any, swr: any): Promise<any>;
 }
-export function getDataSourceByName(dbName: string, GetColumnAuth?: boolean): Promise<object>;
+export function getDataSourceByName(dbName: string, GetColumnAuth?: boolean, swrMode?: boolean): Promise<object>;
 export function getDataSourceByNameCompatibleProvite(dbName: any): Promise<any>;
 export function getAuthFieldsByName(dbName: any): Promise<{}>;
 export function getDataSourceFieldsWithAuth(authList: any, resourceCheckInfos: any): any;
-export function getAuthFields(dbName: any, enabledFieldNames: any, displaySystem: any, isUseAll: boolean, isModel: boolean, connectorMethod: any): Promise<{
+export function getAuthFields(dbName: any, enabledFieldNames: any, displaySystem: any, isUseAll: boolean, isModel: boolean, connectorMethod: any, swrMode?: boolean): Promise<{
     readFields: any[];
     writeFields: any[];
     requireNoRwFields: any[];
     authLoading: boolean;
     showFields: any[];
 }>;
-export function resolveFieldsFromDatasource({ dbName, enabledFieldNames, displaySystem, isUseAll, isModel, connectorMethod, }: {
+export function resolveFieldsFromDatasource({ dbName, enabledFieldNames, displaySystem, isUseAll, isModel, connectorMethod, swrMode, }: {
     dbName: any;
     enabledFieldNames: any;
     displaySystem: any;
     isUseAll: any;
     isModel?: boolean;
     connectorMethod: any;
+    swrMode?: boolean;
 }): Promise<any>;
 export function getPrimaryField(_data: any): any;

package/dist/web/utils/datasource.js

@@ -1,6 +1,7 @@
 import { isInIde, alertErrorMessage, isSystemField } from './platform';
 import { callDataSource, callConnector, callWedaApi } from './tcb';
 import { WdCompError } from './error';
+import { getUuid } from './tool';
 /* **** 数据源相关方法 **** */
 export class DataSource {
     constructor(name) {
@@ -12,11 +13,12 @@ export class DataSource {
         });
         this.dbName = name;
     }
-    async getRecord(id) {
+    async getRecord(id, { db = this.dbName, swr = {} } = {}) {
         try {
             const res = await callDataSource({
-                dataSourceName: this.dbName,
+                dataSourceName: db,
                 methodName: 'wedaGetItem',
+                swr,
                 params: {
                     _id: id,
                 },
@@ -182,11 +184,10 @@ export class DataSource {
  * @param {boolean} GetColumnAuth - Whether to get the column authorization.
  * @returns {Promise<object>} An object representing the data source.
  */
-export const getDataSourceByName = async (dbName, GetColumnAuth = true) => {
+// 默认采用swr模式
+export const getDataSourceByName = async (dbName, GetColumnAuth = true, swrMode = true) => {
     var _a, _b;
     try {
-        // 默认采用swr模式
-        const swrMode = true;
         // dbName 为空时
         if (!dbName)
             return;
@@ -200,9 +201,14 @@ export const getDataSourceByName = async (dbName, GetColumnAuth = true) => {
                 return getDataSourceByNameCompatibleProvite(dbName);
             }
         }
-        const datasource = await window.app.cloud.getDataSourceProfileAsync(GetColumnAuth
+        let param = GetColumnAuth
             ? { Name: dbName, GetColumnAuth: true, swrMode }
-            : { Name: dbName, swrMode });
+            : { Name: dbName, swrMode };
+        if (!swrMode) {
+            // 强制刷新
+            param.forceRefresh = getUuid();
+        }
+        const datasource = await window.app.cloud.getDataSourceProfileAsync(param);
         return datasource;
     }
     catch (error) {
@@ -310,7 +316,7 @@ export const getDataSourceFieldsWithAuth = (authList, resourceCheckInfos) => {
  * 2022-08-06
  * 新增返回 showFields:[] 能够展示的字段，包含读写字段和只读字段，其中只读字段的表单项为disable状态
  */
-export const getAuthFields = async (dbName, enabledFieldNames, displaySystem, isUseAll = false, isModel = true, connectorMethod) => {
+export const getAuthFields = async (dbName, enabledFieldNames, displaySystem, isUseAll = false, isModel = true, connectorMethod, swrMode = true) => {
     const allFields = await resolveFieldsFromDatasource({
         dbName,
         enabledFieldNames,
@@ -318,6 +324,7 @@ export const getAuthFields = async (dbName, enabledFieldNames, displaySystem, is
         isUseAll,
         isModel,
         connectorMethod,
+        swrMode,
     });
     const [readFields, writeFields, requireNoRwFields, authLoading, showFields] = [
         [].concat(allFields),
@@ -338,12 +345,12 @@ export const getAuthFields = async (dbName, enabledFieldNames, displaySystem, is
  * 根据数据库名，解析 fields
  * isUseAll：表格组件不使用enabledFieldNames，而是使用columnSets
  */
-export const resolveFieldsFromDatasource = async ({ dbName, enabledFieldNames, displaySystem, isUseAll, isModel = true, connectorMethod, }) => {
+export const resolveFieldsFromDatasource = async ({ dbName, enabledFieldNames, displaySystem, isUseAll, isModel = true, connectorMethod, swrMode = true, }) => {
     var _a, _b, _c, _d;
     if (isModel) {
         if ((!dbName || !(enabledFieldNames === null || enabledFieldNames === void 0 ? void 0 : enabledFieldNames.length)) && !isUseAll)
             return [];
-        const datasource = await getDataSourceByName(dbName, true);
+        const datasource = await getDataSourceByName(dbName, true, swrMode);
         // 警告
         if (!datasource) {
             console.error(`未找到数据源 ${dbName}`, window.app.cloud);

package/dist/web/utils/date.d.ts

@@ -1,3 +1,6 @@
+export function convertDateRangToNumber(data: any): any[];
+export function convertDateRangeToString(data: any, format: any): any[];
+export function convertStartEndValue(data: any, setMoment: any): any[];
 export function formatTimeByType(dateType: any, v?: number, field?: any): string;
 export function getFullDate(v?: number): string;
 export function addZero(v: any): any;
@@ -13,3 +16,5 @@ export function dateCalculation({ key, val, rel }: {
     val: any;
     rel: string;
 }[];
+export const YEAR_START: -100;
+export const YEAR_END: 100;

package/dist/web/utils/date.js

@@ -2,6 +2,7 @@ import moment from 'moment';
 import 'moment/locale/zh-cn';
 import { isSystemField } from './platform';
 moment.locale('zh-cn');
+import { convertMoment } from './moment';
 // 'time' | 'date' | 'datetime'
 export const formatTimeByType = (dateType, v = Date.now(), field = undefined) => {
     // 时间
@@ -135,3 +136,32 @@ export const dateCalculation = ({ key, val, rel }, filterType) => {
     }
     return dateSearchvalue;
 };
+// 任意转数字数组或 null
+export function convertDateRangToNumber(data) {
+    if (data == null || !Array.isArray(data))
+        return null;
+    return [getDateValue(data[0]), getDateValue(data[1])];
+}
+// 任意转字符串数组或 null
+export function convertDateRangeToString(data, format) {
+    if (data == null || !Array.isArray(data))
+        return null;
+    return [getDateStr(data[0], format), getDateStr(data[1], format)];
+}
+const getDateValue = (val) => { var _a, _b; return (_b = (_a = convertMoment(val)) === null || _a === void 0 ? void 0 : _a.valueOf()) !== null && _b !== void 0 ? _b : null; };
+const getDateStr = (val, format) => { var _a, _b; return (_b = (_a = convertMoment(val)) === null || _a === void 0 ? void 0 : _a.format(format)) !== null && _b !== void 0 ? _b : ''; };
+// PC 日期区间后值不小于前值
+export function convertStartEndValue(data, setMoment) {
+    if (data == null || !Array.isArray(data))
+        return null;
+    let value = convertDateRangToNumber(data);
+    if (value[1] < value[0]) {
+        value = [value[1], value[0]];
+    }
+    if (setMoment) {
+        value = value.map((d) => convertMoment(d));
+    }
+    return value;
+}
+export const YEAR_START = -100;
+export const YEAR_END = 100;

package/dist/web/utils/file2base64.d.ts

@@ -0,0 +1 @@
+export declare const toBase64Uri: (file: File) => Promise<string>;

package/dist/web/utils/file2base64.js

@@ -0,0 +1,6 @@
+export const toBase64Uri = (file) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+});