@cloudbase/weda-ui 3.1.0 → 3.1.1

package/dist/web/components/form/uploader/uploader.pc.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { H5UploaderProps } from './uploader.h5';
+export declare const CLASS_PREFIX = "weda-uploader-pc";
+export declare const IMAGE_TYPES: string[];
+/**
+ * 上传图片-官方组件
+ */
+export declare function UploaderPC({ layout, className, id, style, title, tips, ...props }: {
+    [x: string]: any;
+    layout: any;
+    className: any;
+    id: any;
+    style: any;
+    title: any;
+    tips: any;
+}): JSX.Element;
+export declare function UploaderPCInner(props: any): JSX.Element;
+export interface TcbImageProps {
+    fileID?: string;
+    isZoom?: boolean;
+    onError?: (e: unknown) => void;
+}
+export declare const TcbImage: (props: TcbImageProps) => JSX.Element;
+export interface PropsType extends H5UploaderProps {
+    tips?: string;
+    value: string | string[];
+    btnTitle?: string;
+    uploadPath?: string;
+}

package/dist/web/components/form/uploader/uploader.pc.js

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import { Upload, Button, Icon, message, ErrorTip, ImagePreview, ConfigProvider, } from 'tea-component';
+import classNames from '../../../utils/classnames';
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import { isCloudFileID, randomStr } from '../../../utils/platform';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { emptyObject } from '../../../utils/constant';
+// 默认组件类前缀
+export const CLASS_PREFIX = 'weda-uploader-pc';
+// 默认图片类型
+export const IMAGE_TYPES = [
+    'image/jpg',
+    'image/png',
+    'image/tif',
+    'image/bmp',
+    'image/jpeg',
+    'image/tiff',
+    'image/gif',
+];
+/**
+ * 上传图片-官方组件
+ */
+// eslint-disable-next-line react/prop-types
+export function UploaderPC({ layout, className, id, style, title, tips, ...props }) {
+    const cls = classNames({
+        'weda-ui': true,
+        [CLASS_PREFIX]: true,
+        [layout]: layout,
+        [className]: className,
+    });
+    return (React.createElement("div", { className: cls, id: id, style: style },
+        React.createElement("div", { className: `${CLASS_PREFIX}__header` },
+            title && React.createElement("div", { className: `${CLASS_PREFIX}__title` }, title),
+            tips && (React.createElement("div", { className: `${CLASS_PREFIX}__description` }, tips || ''))),
+        React.createElement(UploaderPCInner, { ...props })));
+}
+export function UploaderPCInner(props) {
+    const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, value: defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
+    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, onChange, } = props;
+    // 上传中
+    const [uploading, setUploading] = React.useState(false);
+    //上传进度
+    const [progress, setProgress] = React.useState(0);
+    // 文件列表
+    const [fileIDList, setfileIDList] = React.useState([]);
+    const fileRef = React.useRef([]);
+    React.useEffect(() => {
+        let initialValue = []
+            .concat(defaultValue)
+            .filter((d) => typeof d === 'string' && d !== '');
+        if (single) {
+            initialValue = initialValue[0] ? [initialValue[0]] : [];
+        }
+        setfileIDList(initialValue);
+    }, [defaultValue]);
+    // 值变化事件
+    React.useEffect(() => {
+        if (!isObjectEqual(fileRef.current, fileIDList)) {
+            if (single) {
+                const file = fileIDList[0] || '';
+                onChange && onChange(file);
+                events.change && events.change({ value: file });
+            }
+            else {
+                onChange && onChange(fileIDList);
+                events.change && events.change({ value: fileIDList });
+            }
+            fileRef.current = fileIDList;
+        }
+    });
+    // 方法：上传前，判断图片大小、数量是否满足，取消默认组件的上传事件，用自定义的 tcb 上传方法
+    const beforeHandle = (file, fileList, isAccepted, error) => {
+        if (!isAccepted) {
+            try {
+                const errorList = [];
+                if (error.find((item) => (item === null || item === void 0 ? void 0 : item.code) === 'file-invalid-type')) {
+                    errorList.push('上传图片类型错误');
+                }
+                if (error.find((item) => (item === null || item === void 0 ? void 0 : item.code) === 'file-too-large')) {
+                    errorList.push(`上传图片大小不能超过${maxSize}M`);
+                }
+                message.error({ content: errorList.join(', ') });
+            }
+            catch (e) { }
+            return false;
+        }
+        uploadTcb(file);
+        return false;
+    };
+    // 自定义上传到 Tcb 的 COS
+    const uploadTcb = (file) => {
+        setUploading(true);
+        getCloudInstance().then(async (tcb) => {
+            try {
+                const cloudPath = `${uploadPath}/${randomStr()}-${file === null || file === void 0 ? void 0 : file.name}`;
+                const { fileID } = await tcb.uploadFile({
+                    cloudPath,
+                    filePath: file,
+                    onUploadProgress: onProgress,
+                });
+                fileID && setfileIDList((list) => [...list, fileID]);
+                fileID && events.success && events.success({ value: fileID, file });
+            }
+            catch (err) {
+                message.error({ content: `${err}` || '上传失败' });
+                events.error && events.error(err);
+            }
+            finally {
+                setUploading(false);
+                setProgress(0);
+            }
+        });
+    };
+    // 计算上传进度
+    const onProgress = (progressEvent) => {
+        let percentCompleted = 0;
+        try {
+            percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+            percentCompleted < 100 ? percentCompleted : 100;
+        }
+        catch (e) { }
+        setProgress(percentCompleted);
+    };
+    // 删除图片
+    const deleteHandle = (fileID) => {
+        setfileIDList((list) => list.filter((d) => d !== fileID));
+    };
+    // 转换后的属性
+    const extraProps = {};
+    extraProps['accept'] =
+        acceptTypes.includes('image/*') || acceptTypes.length === 0
+            ? IMAGE_TYPES
+            : Array.from(new Set(acceptTypes));
+    tips && (extraProps['title'] = tips);
+    maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: "_weda-fn-upload-result" },
+            fileIDList.map((d) => (React.createElement("div", { className: "_weda-fn-upload-result__item", key: d },
+                React.createElement(TcbImage, { fileID: d }),
+                React.createElement("div", { className: "_weda-fn-upload-result__op" },
+                    React.createElement(Button, { onClick: () => deleteHandle(d), className: `${CLASS_PREFIX}__btn` }, "\u5220\u9664"))))),
+            uploading && (React.createElement("div", { className: "_weda-fn-upload-result__item" },
+                React.createElement("div", { className: "_weda-fn-upload-result__status", key: "_place_image" },
+                    React.createElement(Icon, { type: "loading" }),
+                    !!progress && (React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" },
+                        "\u4E0A\u4F20",
+                        progress,
+                        "%..."))))),
+            React.createElement("div", { className: `${CLASS_PREFIX}__input-box` }, ((!single && fileIDList.length < maxUploadCount) ||
+                (single && fileIDList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+            React.createElement(Upload, { ...extraProps, beforeUpload: beforeHandle },
+                React.createElement("li", { className: "_weda-fn-upload-result__item _weda-fn-upload-result__item--upload" },
+                    React.createElement("div", { className: "_weda-fn-upload-result__status" },
+                        React.createElement("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }),
+                        React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle)))))))));
+}
+export const TcbImage = (props) => {
+    const { fileID, isZoom, ...rest } = props;
+    const [src, setSrc] = React.useState('');
+    const [isError, setIsError] = React.useState(false);
+    React.useEffect(() => {
+        const getSrc = async () => {
+            try {
+                const _src = await getTempFileURL(fileID);
+                _src ? setSrc(_src) : setIsError(true);
+            }
+            catch (e) {
+                message.error({ content: '图片加载失败' });
+            }
+        };
+        isCloudFileID(fileID) ? getSrc() : setSrc(fileID);
+    }, [fileID]);
+    return isError ? (React.createElement(ErrorTip, null)) : src ? (isZoom ? (React.createElement(ImagePreview, { key: fileID, className: `${CLASS_PREFIX}__image`, ...rest, src: src, previewSrc: src, 
+        /** @ts-expect-error tea imagepreview onError */
+        onError: (e) => {
+            setIsError(true);
+            (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
+        } })) : (React.createElement("img", { key: fileID, className: `${CLASS_PREFIX}__image`, ...rest, src: src, onError: (e) => {
+            setIsError(true);
+            (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
+        } }))) : null;
+};

package/dist/web/components/form/uploaderFile/index.css

@@ -0,0 +1,422 @@
+.weda-uploader-pc {
+  margin: 0;
+  padding: 0;
+}
+
+.weda-uploader-pc .weda-uploader-pc__title {
+  color: #000000;
+  line-height: 1.42857rem;
+  font-weight: 400;
+  margin-bottom: 0.28571rem;
+}
+
+/* 单张图片回显 */
+.weda-uploader-pc .weda-uploader-pc__image-box {
+  height: 7.14286rem;
+  width: 7.14286rem;
+  margin-right: 0.57143rem;
+  margin-bottom: 0.57143rem;
+  background: #f2f2f2;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.weda-uploader-pc .weda-uploader-pc__body {
+  margin-bottom: 0.57143rem;
+}
+
+.weda-uploader-pc .weda-uploader-pc__input-box {
+  margin-bottom: 0.57143rem;
+}
+.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__body {
+  margin-bottom: 0;
+}
+
+.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__input-box {
+  margin-bottom: 0;
+}
+.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__image-list {
+  margin-left: 0.57143rem;
+}
+
+.weda-uploader-pc .weda-uploader-pc__image-box:hover .weda-uploader-pc__action {
+  display: flex;
+}
+
+.weda-uploader-pc .weda-uploader-pc__image {
+  max-height: 100%;
+  height: auto;
+  width: 100%;
+  cursor: zoom-in;
+}
+
+.weda-uploader-pc .weda-uploader-pc__action {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.weui-uploader.horizontal {
+  display: flex;
+}
+.weui-uploader.horizontal .weui-uploader__hd {
+  display: inline-block;
+  align-self: center;
+}
+.weda-uploader-pc.horizontal {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* ----上传文件----  pc */
+.weda-upload-file-pc .weda-upload-file-pc__file-item {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc__btn-descripe {
+  margin-left: 1.14286rem;
+  font-size: 0.75em;
+  line-height: 1.42857rem;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.weda-upload-file-pc .wedatea2td-list--divider > li {
+  padding: 0 !important;
+}
+
+.weda-upload-file-pc .wedatea2td-list--divider > li:nth-child(n + 2) {
+  border-top: 0;
+  border-bottom: 0.07143rem solid #e7e7e7;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc--item {
+  display: flex;
+  font-size: 0.875em;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc--item-header {
+  border: 0.07143rem solid #e7e7e7;
+  font-size: 0.875em;
+  line-height: 1.375em;
+  color: rgba(0, 0, 0, 0.4);
+  margin-top: 1.14286rem;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc--item-body {
+  border-left: 0.07143rem dashed #e7e7e7;
+  border-right: 0.07143rem dashed #e7e7e7;
+  font-size: 0.875em;
+  line-height: 1.375em;
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item-header
+  .weda-upload-file-pc--item-label {
+  border-right: 0.07143rem solid #e7e7e7;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-title {
+  width: 15.71429rem;
+  padding: 0.71429rem 0.85714rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-size {
+  width: 7.14286rem;
+  padding: 0.71429rem 0.85714rem;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-status {
+  width: 10.71429rem;
+  padding: 0.71429rem 0.85714rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-action {
+  width: 11.42857rem;
+  padding: 0.71429rem 0.85714rem;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc__btn--weak {
+  border-color: #dcdcdc;
+  color: rgba(0, 0, 0, 0.9);
+  width: 6.28571rem;
+  font-size: 0.875em;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-status
+  .wedatea2td-icon {
+  margin-right: 0.57143rem;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-status
+  .wedatea2td-icon.wedatea2td-icon-pending-gray {
+  background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+SWNvbjwvdGl0bGU+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJwYyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY1MS4wMDAwMDAsIC0zOTQuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLkuIrkvKAv5om56YeP5LiK5Lyg5Lit5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNzIuMDAwMDAwLCAxNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i5YaF5a655YiXIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTA3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NC4wMDAwMDAsIDEyNi4wMDAwMDApIiBpZD0i57yW57uEIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQuMDAwMDAwLCAxMy4wMDAwMDApIiBpZD0iMS5CYWNl5Z+656GALzMuSWNvbuWbvuaghy/mk43kvZwvbW92ZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCwwIEwxNiwwIEwxNiwxNiBMMCwxNiBMMCwwIFoiIGlkPSJ0aW1lLWZpbGxlZC0oQmFja2dyb3VuZCkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNSw4IEMxNSw0LjEzNDAwNjc0IDExLjg2NTk5MzUsMSA4LDEgQzQuMTM0MDA2NzQsMSAxLDQuMTM0MDA2NzQgMSw4IEMxLDExLjg2NTk5MzUgNC4xMzQwMDY3NCwxNSA4LDE1IEMxMS44NjU5OTM1LDE1IDE1LDExLjg2NTk5MzUgMTUsOCBaIE03LjUsOC4zODg5MjQ2IEwxMC42NDY2OTA0LDExLjUzNTYxNTkgTDExLjM1Mzc5NzksMTAuODI4NTA4NCBMOC41LDcuOTc0NzExNDIgTDguNSw1IEw3LjUsNSBMNy41LDguMzg4OTI0NiBaIiBpZD0idGltZS1maWxsZWQiIGZpbGwtb3BhY2l0eT0iMC40IiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-action
+  .wedatea2td-btn {
+  font-size: 0.875em;
+  line-height: 1.375em;
+  color: #0052d9;
+  margin-right: 0.85714rem;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-action
+  .wedatea2td-btn:last-child {
+  margin-right: 0;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc--item-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 12.07143rem;
+  background: #ffffff;
+  border: 0.07143rem dashed #dcdcdc !important;
+  border-top: none !important;
+  border-radius: 0 0 0.14286rem 0.14286rem;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item-empty
+  .weda-upload-file-pc--item {
+  font-size: 0.875em;
+  color: rgba(0, 0, 0, 0.4);
+  line-height: 1.375em;
+}
+
+/* ----上传文件----  h5 */
+.weda-upload-file-mobile {
+  width: 90%;
+  background-color: #f6f6f6;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__hd {
+  width: 100%;
+  padding: 1.14286rem;
+  padding-left: 0;
+  display: flex;
+  background-color: #fff;
+}
+.weda-upload-file-mobile .vertical {
+  padding: 0 1.42857rem 0.57143rem 1.42857rem;
+}
+.weda-upload-file-mobile .weda-upload-file-mobile__title {
+  font-size: 0.875em;
+  line-height: 1.25em;
+  color: #000;
+  margin-right: 1.42857rem;
+  padding-top: 0.42857rem;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__btn--weak {
+  width: 6.28571rem;
+  padding: 0 1.14286rem;
+  font-size: 0.875em;
+  color: rgba(0, 0, 0, 0.9);
+  border: 0.07143rem solid #dcdcdc;
+  border-radius: 0.21429rem;
+  line-height: 1.375em;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__tips {
+  display: block;
+  margin-top: 0.57143rem;
+  font-size: 0.75em;
+  line-height: 1.25em;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__bd {
+  margin-top: 0.57143rem;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__bd .wedatea2td-list > li {
+  margin-bottom: 0.57143rem;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__item {
+  width: 100%;
+  padding: 1.14286rem;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__btn-group {
+  display: flex;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__item .wedatea2td-icon {
+  width: 1.71429rem;
+  height: 1.71429rem;
+  margin-right: 1.14286rem;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__btn-group
+  .wedatea2td-icon:last-child {
+  margin-right: 0;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .wedatea2td-icon.wedatea2td-icon-delete {
+  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/2372f6a8-2f6a-4f30-92bf-73c62a5c0ae7.svg');
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .wedatea2td-icon.wedatea2td-icon-download {
+  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4cba5da1-cde4-40c6-a075-86eff22858a4.svg');
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .wedatea2td-icon.wedatea2td-icon-refresh {
+  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/af5486eb-65e0-4536-8e51-6c68a17b71ac.svg');
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__item-left {
+  flex: 1;
+  margin-right: 1.14286rem;
+  width: 70%;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-detail {
+  display: flex;
+  align-items: center;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-name {
+  font-size: 0.875em;
+  line-height: 1.375em;
+  color: rgba(0, 0, 0, 0.9);
+  max-width: 6.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status {
+  margin-left: 1.71429rem;
+  display: flex;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status
+  .wedatea2td-icon {
+  width: 1.14286rem;
+  height: 1.14286rem;
+  background-size: 100% 100%;
+  margin-right: 0;
+}
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status
+  .wedatea2td-icon.wedatea2td-icon-fail {
+  background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+MS5CYWNl5Z+656GALzMuSWNvbuWbvuaghy/mk43kvZwvbW92ZTwvdGl0bGU+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLnlLvmnb8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQuMDAwMDAwLCAtMjEwLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iMS5CYWNl5Z+656GALzMuSWNvbuWbvuaghy/mk43kvZwvbW92ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAzLjAwMDAwMCwgMjA5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTYsMCBMMTYsMTYgTDAsMTYgTDAsMCBaIiBpZD0iY2xvc2UtY2lyY2xlLWZpbGxlZC0oQmFja2dyb3VuZCkiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04LDEgQzQuMTM0MDA5MTIsMSAxLDQuMTM0MDA0ODMgMSw4IEMxLDExLjg2NTk5MTYgNC4xMzQwMDQ4MywxNSA4LDE1IEMxMS44NjU5OTE2LDE1IDE1LDExLjg2NTk5NTQgMTUsOCBDMTUsNC4xMzQwMDkxMiAxMS44NjU5OTU0LDEgOCwxIFogTTguMDAwMDExOTIsNy4yOTA3NTE0NiBMMTAuMzI5MTE3OCw0Ljk0NzUzODE0IEwxMS4wMzgzNTU4LDUuNjUyNTA3MzEgTDguNzA0OTkzMjUsOCBMMTEuMDM4MzQ3MiwxMC4zNDc0ODk0IEwxMC4zMjkxMDgyLDExLjA1MjQ1NzggTDguMDAwMDExNDQsOC43MDkyNTQyNiBMNS42NzA5MTU2LDExLjA1MjQ1NzggTDQuOTYxNjc2NiwxMC4zNDc0ODg0IEw3LjI5NTAzMDU5LDggTDQuOTYxNjY3NzgsNS42NTI1MDY4MyBMNS42NzA5MDY1NCw0Ljk0NzUzODE0IEw4LjAwMDAxMTkyLDcuMjkwNzUxNDYgWiIgaWQ9ImNsb3NlLWNpcmNsZS1maWxsZWQiIGZpbGw9IiNFMzRENTkiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
+}
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status
+  .wedatea2td-icon.wedatea2td-icon-success {
+  background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+MS5CYWNl5Z+656GALzMuSWNvbuWbvuaghy/mk43kvZwvbW92ZTwvdGl0bGU+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLnlLvmnb8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQuMDAwMDAwLCAtMTIwLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iMS5CYWNl5Z+656GALzMuSWNvbuWbvuaghy/mk43kvZwvbW92ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAzLjAwMDAwMCwgMTE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTYsMCBMMTYsMTYgTDAsMTYgTDAsMCBaIiBpZD0iY2hlY2stY2lyY2xlLWZpbGxlZC0oQmFja2dyb3VuZCkiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNSw4IEMxNSw0LjEzNDAwNjc0IDExLjg2NTk5MzUsMSA4LDEgQzQuMTM0MDA2NzQsMSAxLDQuMTM0MDA2NzQgMSw4IEMxLDExLjg2NTk5MzUgNC4xMzQwMDY3NCwxNSA4LDE1IEMxMS44NjU5OTM1LDE1IDE1LDExLjg2NTk5MzUgMTUsOCBaIE03LDEwLjcwNjk5OTggTDExLjUsNi4yMDc0OTk5OCBMMTAuNzkyNDk5NSw1LjUgTDcsOS4yOTMwMDAyMiBMNS4yMDY1MDAwNSw3LjUgTDQuNSw4LjIwNjUwMDA1IEw3LDEwLjcwNjk5OTggWiIgaWQ9ImNoZWNrLWNpcmNsZS1maWxsZWQiIGZpbGw9IiMwMEE4NzAiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
+}
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status--msg {
+  width: 4.2rem;
+  margin-left: 0.28571rem;
+  font-size: 0.75em;
+  line-height: 1.25em;
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-foot {
+  font-size: 0.75em;
+  line-height: 1.25em;
+  color: rgba(0, 0, 0, 0.4);
+  margin-top: 0.57143rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-progress {
+  margin-top: 0.28571rem;
+  border-radius: 0;
+  background-color: #e7e7e7;
+  height: 0.21429rem !important;
+  margin-bottom: 0;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-progress
+  .wedatea2td-progress__value {
+  border-radius: 0;
+  height: 0.21429rem !important;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-progress
+  .wedatea2td-progress__text {
+  display: none;
+}
+.weda-upload-file-mobile .weui-uploader-mobile__input {
+  position: absolute;
+  font-size: 1em;
+  opacity: 0;
+  width: 6.57143rem;
+  height: 2.28571rem;
+}

package/dist/web/components/form/uploaderFile/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 文件组件上传，区分 h5端/pc端
+ */
+export default function UploaderFile(props: any): JSX.Element;

package/dist/web/components/form/uploaderFile/index.js

@@ -0,0 +1,19 @@
+/* eslint-disable react/prop-types */
+import * as React from 'react';
+import { usePlatform } from '../../../utils/platform';
+import { UploadFileH5 as UploaderH5 } from './uploadFile.h5';
+import { UploadFilePc } from './uploadFile.pc';
+import './index.css';
+/**
+ * 文件组件上传，区分 h5端/pc端
+ */
+export default function UploaderFile(props) {
+    const platform = usePlatform();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return React.createElement(UploadFilePc, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return React.createElement(UploaderH5, { ...props });
+    }
+    return platform === 'h5' ? (React.createElement(UploaderH5, { ...props })) : (React.createElement(UploadFilePc, { ...props }));
+}

package/dist/web/components/form/uploaderFile/uploadFile.h5.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+export declare const FILES_TYPES: string[];
+export declare function UploadFileH5({ layout, id, style, labelVisible, label, requiredFlag, disabled, className, acceptTypes, tips, btnTitle, maxUploadCount, maxSize, deleteVisible, downloadVisible, value, // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
+events, defaultValue, uploadPath, single, onChange, isEdit, }: IUploadFileH5): JSX.Element;
+export interface IUploadFileH5 extends CommonFormPropsType {
+    className?: string;
+    label?: string;
+    tips?: string;
+    btnTitle?: string;
+    maxUploadCount?: number;
+    deleteVisible?: boolean;
+    downloadVisible?: boolean;
+    acceptTypes?: Readonly<string[] | string>;
+    disabled?: boolean;
+    defaultValue?: string | string[];
+    maxSize?: number;
+    value?: Readonly<string | string[]>;
+    uploadPath?: string;
+    single?: boolean;
+    onChange?: (v: any) => void;
+    isEdit: boolean;
+}