@cloudbase/weda-ui 0.2.11 → 0.2.12

package/src/web/components/form/uploaderFile/uploadFile.pc.jsx

@@ -0,0 +1,487 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {
+  Upload,
+  ConfigProvider,
+  Button,
+  message,
+  Icon,
+  Text,
+  List,
+} from 'tea-component';
+import { v4 } from 'uuid';
+import {
+  filterStrList,
+  isCloudFileID,
+  isHttpFileID,
+  transSize,
+  downloadFile,
+  cutFileTitle
+} from '../../../utils/platform';
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import classNames from '../../../utils/classnames';
+import { renderDecorator } from '../renderDecorator';
+
+// 默认组件类前缀
+const CLASS_PREFIX = 'weda-upload-file-pc';
+
+// 上传状态字典
+const statusMap = {
+  0: { title: '待上传', icon: 'pending-gray' },
+  1: { title: '上传 ...', icon: 'loading' },
+  2: { title: '上传成功', icon: 'success' },
+  3: { title: '上传失败', icon: 'error' },
+};
+
+// 上传文件Context
+const FileContext = React.createContext(null);
+
+/**
+ * 上传文件 PC 版本
+ */
+export function UploadFilePc({
+  // 系统属性
+  layout = {},
+  id = '',
+  style = {},
+  labelVisible = true,
+  title = '上传文件',
+  requiredFlag = false,
+  disabled = false,
+  className = '',
+  // 组件属性
+  decorator,
+  tips = '',
+  btnTitle = '点击上传',
+  maxUploadCount = 9,
+  maxSize = 1024,
+  single = true,
+  defaultValue = [], // 默认值，和 value 同时存在
+  acceptTypes = [],
+  events = { success: null, error: null, change: null },
+  downloadVisible = true,
+  deleteVisible = true,
+  uploadPath = 'weda-uploader',
+  value = [], // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
+  onChange = null,
+  isEdit = true,
+}) {
+  const [fileIDList, setfileIDList] = React.useState(
+    filterStrList([].concat(defaultValue, value))
+  ); // 上传成功文件ID列表，fileID[]
+  const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
+  const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
+
+  React.useEffect(() => {
+    // 外部 onChange 事件
+    const pureFileIDList = fileIDList.filter(
+      (d) => isCloudFileID(d) || isHttpFileID(d)
+    );
+    if (single) {
+      const file = pureFileIDList[0] || '';
+      onChange?.(file);
+      events?.change?.({ value: file });
+      events?.success?.({ value: file });
+    } else {
+      onChange?.(pureFileIDList);
+      events?.change?.({ value: pureFileIDList });
+      events?.success?.({ value: pureFileIDList });
+    }
+  }, [fileIDList]);
+
+  // 外层组件类
+  const cls = classNames({
+    'weda-ui': true,
+    [className]: className,
+  });
+
+  // 批量上传文件前置事件
+  const handleBefore = (file, fileList, isAccepted, error) => {
+    if (fileList.length + fileIDList.length > maxUploadCount) {
+      message.warning({ content: `上传文件总数不能超过${maxUploadCount}个` });
+      return false;
+    }
+    if (!isAccepted) {
+      try {
+        const errorList = [];
+        if (error.find((item) => item?.code === 'file-invalid-type')) {
+          errorList.push('上传文件类型错误');
+        }
+        if (error.find((item) => item?.code === 'file-too-large')) {
+          errorList.push(`上传文件大小不能超过${maxSize}M`);
+        }
+        message.error({ content: errorList.join(', ') });
+      } catch (e) {}
+      return false;
+    }
+    file['_uuid'] = v4();
+    setFileList((list) => [...list, file]);
+    return false;
+  };
+
+  // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
+  const handleChange = ({ fileID, uuid, type, size }) => {
+    // 上传时新增事件
+    if (type === 'add') {
+      fileID && setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
+      fileID && setfileIDList((list) => [...list, fileID]);
+    } else {
+      fileID && setfileIDList((list) => list.filter((d) => d !== fileID));
+    }
+    uuid && setFileList((list) => list.filter((item) => uuid !== item?._uuid));
+  };
+
+  // 上传组件属性
+  const uploadProps = { multiple: !single };
+  if (
+    !(
+      !acceptTypes?.length ||
+      acceptTypes?.includes('*') ||
+      acceptTypes?.includes('')
+    )
+  ) {
+    uploadProps['accept'] = Array.from(new Set(acceptTypes));
+  }
+  tips && (uploadProps['title'] = tips);
+  maxSize && (uploadProps['maxSize'] = maxSize * 1024 * 1024);
+  const btnDisabled =
+    fileIDList.length >= maxUploadCount || (single && fileIDList.length > 0);
+
+  return renderDecorator(
+    <ConfigProvider classPrefix="wedatea2td">
+      <FileContext.Provider
+        value={{
+          uploadPath,
+          downloadVisible,
+          deleteVisible,
+          onChange: handleChange,
+          isEdit,
+          events,
+          fileSizeObj,
+        }}
+      >
+        <div className={`${CLASS_PREFIX}`}>
+          {isEdit && (
+            <div className={`${CLASS_PREFIX}__input-box`}>
+              {disabled || btnDisabled ? (
+                <Button type="weak" disabled={true}>
+                  {btnTitle}
+                </Button>
+              ) : (
+                <Upload {...uploadProps} beforeUpload={handleBefore}>
+                  <Button type="weak" className={`${CLASS_PREFIX}__btn--weak`}>
+                    {btnTitle}
+                  </Button>
+                  {!single && (
+                    <Text
+                      theme="weak"
+                      className={`${CLASS_PREFIX}__btn-descripe`}
+                    >
+                      支持批量上传
+                    </Text>
+                  )}
+                </Upload>
+              )}
+            </div>
+          )}
+          <List split="divide">
+            <List.Item>
+              <div
+                className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-header`}
+              >
+                <div
+                  className={`${CLASS_PREFIX}--item-title ${CLASS_PREFIX}--item-label`}
+                >
+                  文件名
+                </div>
+                <div
+                  className={`${CLASS_PREFIX}--item-size ${CLASS_PREFIX}--item-label`}
+                >
+                  大小
+                </div>
+                <div
+                  className={`${CLASS_PREFIX}--item-status ${CLASS_PREFIX}--item-label`}
+                >
+                  状态
+                </div>
+                <div className={`${CLASS_PREFIX}--item-action`}>操作</div>
+              </div>
+            </List.Item>
+
+            {fileIDList.map((d) => (
+              <List.Item key={d}>{<TcbFileEcho fileID={d} />}</List.Item>
+            ))}
+
+            {fileList.map((item) => (
+              <List.Item key={item?._uuid}>
+                {<TcbFileUpload file={item} />}
+              </List.Item>
+            ))}
+
+            {isEdit && fileIDList.length === 0 && fileList.length === 0 && (
+              <List.Item className={`${CLASS_PREFIX}--item-empty`}>
+                <div className={`${CLASS_PREFIX}--item`}>
+                  点击上方“{btnTitle}”按钮
+                </div>
+              </List.Item>
+            )}
+          </List>
+        </div>
+      </FileContext.Provider>
+    </ConfigProvider>,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? title : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+  });
+}
+
+UploadFilePc.propTypes = {
+  className: PropTypes.string, // 传入类
+  title: PropTypes.string, // 官方属性：标题
+  labelVisible: PropTypes.bool, // 官方属性：显示标题
+  btnTitle: PropTypes.string, // 官方属性：上传按钮标题，[web]
+  maxUploadCount: PropTypes.number, // 官方属性：上传文件最大数量，作用于 数组，用 single 控制数组还是单个对象
+  downloadVisible: PropTypes.bool, // 官方属性：显示下载按钮
+  deleteVisible: PropTypes.bool, // 官方属性：显示删除按钮
+  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 官方属性：初始值值
+  maxSize: PropTypes.number, // 官方属性：单个图片大小限制，单位是M
+  requiredFlag: PropTypes.bool, // 官方属性：是否必填
+  disabled: PropTypes.bool, // 官方属性：是否禁用
+  events: PropTypes.any, // 官方属性：上传成功/失败事件
+  single: PropTypes.bool, // 官方属性：单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
+  acceptTypes: PropTypes.array, // 官方属性：支持的上传类型
+  tips: PropTypes.string, // 提示
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 值
+  onChange: PropTypes.objectOf(PropTypes.func), // 配合 fomily 受控使用
+  uploadPath: PropTypes.string, // 上传路径
+  decorator: PropTypes.any,
+  isEdit: PropTypes.bool, // 是否展示上传按钮，用户详情页面展示
+};
+
+/**
+ * 基于 FileID 回显文件表格行组件
+ */
+const TcbFileEcho = ({ fileID }) => {
+  const [src, setSrc] = React.useState('');
+  const { fileSizeObj } = React.useContext(FileContext) || {};
+  React.useEffect(() => {
+    const fetchFileId = async (id) => {
+      if (isCloudFileID(id)) {
+        try {
+          const fileSrc = await getTempFileURL(id);
+          setSrc(fileSrc);
+        } catch (e) {}
+      } else {
+        setSrc(id);
+      }
+    };
+    fetchFileId(fileID);
+  }, [fileID]);
+
+  const title = React.useMemo(() => {
+    if (isCloudFileID(fileID)) {
+      const uuidReg = /file-[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}-/;
+      const lastIndex = `${fileID}`.lastIndexOf('/');
+      const name = `${fileID}`.slice(lastIndex + 1);
+      const title = name.replace(uuidReg, '');
+      return title;
+    } else {
+      return fileID;
+    }
+  }, [fileID]);
+
+  return (
+    <div className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`}>
+      <div className={`${CLASS_PREFIX}--item-title`} title={title}>{cutFileTitle(title)}</div>
+      <div className={`${CLASS_PREFIX}--item-size`}>
+        {fileSizeObj[fileID] || '--'}
+      </div>
+      <div className={`${CLASS_PREFIX}--item-status`}>
+        <UploadFileStatus />
+      </div>
+      <div className={`${CLASS_PREFIX}--item-action`}>
+        <UploadFileAction status="2" fileID={fileID} src={src} />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 基于 File 上传文件过程表格行组件
+ */
+const TcbFileUpload = ({ file }) => {
+  const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
+  const [percent, setPercent] = React.useState(0); // 上传进度
+  const [status, setStatus] = React.useState('0'); // 上传状态
+  const cancleRef = React.useRef(''); // 取消的uuid
+
+  // 上传文件相关属性
+  const { size, title, uuid } = React.useMemo(() => {
+    const size = transSize(file?.size);
+    const title = file?.name || '';
+    const uuid = file?._uuid;
+    return { size, title, uuid };
+  }, [file?._uuid]);
+
+  React.useEffect(() => {
+    handleUpload(file);
+  }, [file?._uuid]);
+
+  // 上传过程
+  const handleUpload = async (file) => {
+    const tcb = await getCloudInstance();
+    try {
+      setStatus('0');
+      const { fileID } = await tcb.uploadFile({
+        cloudPath: `${uploadPath}/${`file-${uuid}-${title}`}`,
+        filePath: file,
+        onUploadProgress: (progressEvent) => {
+          let percent = 0;
+          percent = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
+          setStatus('1');
+          setPercent(percent < 100 ? percent : 100);
+        },
+      });
+      !cancleRef.current && onChange?.({ fileID, type: 'add', uuid, size });
+      setStatus('2');
+    } catch (e) {
+      setStatus('3');
+      events.error && events.error(e);
+    }
+  };
+
+  return (
+    <div className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`}>
+      <div className={`${CLASS_PREFIX}--item-title`} title={title}>{cutFileTitle(title)}</div>
+      <div className={`${CLASS_PREFIX}--item-size`}>{size}</div>
+      <div className={`${CLASS_PREFIX}--item-status`}>
+        <UploadFileStatus status={status} percent={percent} />
+      </div>
+      <div className={`${CLASS_PREFIX}--item-action`}>
+        <UploadFileAction
+          file={file}
+          uuid={file?._uuid}
+          status={status}
+          onCancel={(uuid) => {
+            cancleRef.current = uuid;
+            onChange?.({ type: 'delete', uuid });
+          }}
+          onReLoad={handleUpload}
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 上传文件状态组件
+ */
+const UploadFileStatus = ({ status = '2', percent = 0 }) => {
+  if (status == '1' && percent) {
+    return (
+      <>
+        <Icon type="loading" />
+        上传{percent}% ...
+      </>
+    );
+  }
+  return (
+    <>
+      <Icon type={statusMap[status]?.icon || statusMap['0'].icon} />
+      {statusMap[status]?.title || statusMap['0'].title}
+    </>
+  );
+};
+
+/**
+ * 操作列组件, onChange 从最外层 UploadFilePc 传进来
+ * props: { status, fileID, uuid, src, onChange }
+ */
+const UploadFileAction = ({
+  status = '0',
+  fileID = '',
+  uuid = '',
+  src = '',
+  file = null,
+  onReLoad = null,
+  onCancel = null,
+}) => {
+  const { onChange, downloadVisible, deleteVisible, isEdit } =
+    React.useContext(FileContext) || {};
+
+  // 操作列按钮-删除
+  const renderDelete = () =>
+    isEdit &&
+    deleteVisible && (
+      <Button
+        type="link"
+        onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
+      >
+        删除
+      </Button>
+    );
+
+  // 操作列按钮-取消
+  const renderCancel = () =>
+    isEdit && (
+      <Button onClick={() => onCancel?.(uuid)} type="link">
+        取消
+      </Button>
+    );
+
+  // 操作列按钮-重新上传
+  const renderReLoad = () =>
+    isEdit && (
+      <Button
+        type="link"
+        onClick={() => {
+          onReLoad?.(file);
+        }}
+      >
+        重新上传
+      </Button>
+    );
+
+  // 操作列按钮-下载
+  const renderDownLoad = () =>
+    downloadVisible && (
+      <Button
+        type="link"
+        title="点击下载文件"
+        onClick={() => downloadFile(src)}
+      >
+        下载
+      </Button>
+    );
+
+  switch (status) {
+    case '0':
+      return renderCancel();
+    case '1':
+      return renderCancel();
+    case '2':
+      return (
+        <>
+          {renderDelete()}
+          {renderDownLoad()}
+        </>
+      );
+    case '3':
+      return (
+        <>
+          {renderDelete()}
+          {renderReLoad()}
+        </>
+      );
+    default:
+      return null;
+  }
+};

package/src/web/components/image/{image.jsx → image.tsx}

@@ -3,23 +3,12 @@ import * as PropTypes from 'prop-types';
 import { ConfigProvider, ImagePreview } from 'tea-component';
 import { usePlatform } from '../../utils/platform';
 import { useGesture } from '@use-gesture/react';
-
-ImageInner.propTypes = {
-  objectFit: PropTypes.string,
-  className: PropTypes.string,
-  events: PropTypes.object,
-  style: PropTypes.object,
-  src: PropTypes.string,
-  alt: PropTypes.string,
-  lazyLoad: PropTypes.bool,
-  isError: PropTypes.bool,
-  setIsError: PropTypes.func,
-  maskClosable: PropTypes.bool,
-  imgPreview: PropTypes.bool
-};
-
-const failImgBase64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=';
-
+import { PropsType } from './index';
+interface ImageInnerPropsType extends Omit<PropsType, 'fit'|'mode'> {
+  objectFit: React.CSSProperties['objectFit'],
+  isError: boolean,
+  setIsError: React.Dispatch<React.SetStateAction<boolean>>
+}
 export function ImageInner({
   objectFit,
   style,
@@ -32,7 +21,7 @@ export function ImageInner({
   lazyLoad,
   maskClosable,
   imgPreview
-}) {
+}: ImageInnerPropsType) {
   const platform = usePlatform();
   const [imgShow, setImgShow] = React.useState(false);
   const onMaskClick = () => {
@@ -100,8 +89,7 @@ export function ImageInner({
           alt={alt}
           src={src}
           onLoad={(e) => {
-            /* @type {HTMLImageElement} */
-            const img = e.target;
+            const img = e.target as HTMLImageElement;
             const {naturalHeight, naturalWidth} = img;
             realHeight.current = naturalHeight;
             realWidth.current = naturalWidth;
@@ -154,7 +142,6 @@ export function ImageInner({
       <ConfigProvider classPrefix="wedatea2td">
       <ImagePreview
         previewSrc={src}
-        lazyLoad
         maskClosable={maskClosable}
         className={className}
         style={{...style,

package/src/web/components/image/{index.jsx → index.tsx}

@@ -1,25 +1,36 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import * as PropTypes from 'prop-types';
 
 import classNames from '../../utils/classnames';
 import './index.css';
 import { ImageInner } from './image';
+import { CommonPropsType } from '../../types';
+
+
+const defaultSrc = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0VCRUZGNSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yMCA1NlYyNGg0MHYzMnoiLz48cGF0aCBmaWxsPSIjQzFDQ0REIiBkPSJNMjYgMzdoMjh2MkgyNnptMCA3aDIwdjJIMjZ6bS02LTIwaDQwdjdIMjB6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDggNDQpIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI3Ii8+PHBhdGggZD0iTTEwIDJhOCA4IDAgMSAxIDAgMTYgOCA4IDAgMCAxIDAtMTZ6bTEgMTBIOXYyaDJ2LTJ6bTAtNkg5djVoMlY2eiIgZmlsbD0iIzAwNkVGRiIvPjwvZz48L2c+PC9zdmc+'
+type TMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+export interface PropsType extends CommonPropsType, Pick<HTMLImageElement, 'src'|'alt'> {
+  mode: TMode,
+  lazyLoad: boolean,
+  maskClosable: boolean,
+  imgPreview: boolean,
+  fit: React.CSSProperties['objectFit']
+}
 
 export default function Image({
   // 系统属性
   className,
   events = {},
-  style,
+  style = {},
   // 组件属性
-  src,
-  alt,
-  mode,
-  lazyLoad,
-  imgPreview,
-  maskClosable,
+  src = defaultSrc,
+  alt = '[图片]',
+  mode = 'scaleToFill',
+  lazyLoad = false,
+  imgPreview = false,
+  maskClosable = true,
   fit,
-}) {
+}: PropsType) {
   const [isError, setIsError] = useState(false);
   const cls = classNames({
     'weda-ui': true,
@@ -64,22 +75,8 @@ export default function Image({
   ) : null;
 }
 
-Image.defaultPropTypes = {
-  // 系统属性
-  events: {},
-  style: {},
-  // 组件属性
-  src:
-    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0VCRUZGNSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yMCA1NlYyNGg0MHYzMnoiLz48cGF0aCBmaWxsPSIjQzFDQ0REIiBkPSJNMjYgMzdoMjh2MkgyNnptMCA3aDIwdjJIMjZ6bS02LTIwaDQwdjdIMjB6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDggNDQpIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI3Ii8+PHBhdGggZD0iTTEwIDJhOCA4IDAgMSAxIDAgMTYgOCA4IDAgMCAxIDAtMTZ6bTEgMTBIOXYyaDJ2LTJ6bTAtNkg5djVoMlY2eiIgZmlsbD0iIzAwNkVGRiIvPjwvZz48L2c+PC9zdmc+',
-  alt: '[图片]',
-  lazyLoad: false,
-  fit: 'fill',
-  mode: 'scaleToFill',
-  imgPreview: false,
-  maskClosable: true
-};
 
-function getObjectFitByWxImageMode(mode) {
+function getObjectFitByWxImageMode(mode: TMode): React.CSSProperties['objectFit'] {
   const array = [
     {
       mode: 'scaleToFill',
@@ -101,20 +98,8 @@ function getObjectFitByWxImageMode(mode) {
       mode: 'heightFix',
       h5: 'contain',
     },
-  ];
+  ] as const;
   const item = array.find((item) => item.mode === mode);
   return item?.h5;
 }
 
-Image.propTypes = {
-  className: PropTypes.string,
-  events: PropTypes.object,
-  style: PropTypes.object,
-  src: PropTypes.string,
-  alt: PropTypes.string,
-  mode: PropTypes.string,
-  fit: PropTypes.string,
-  lazyLoad: PropTypes.bool,
-  maskClosable: PropTypes.bool,
-  imgPreview: PropTypes.bool
-};

package/src/web/components/index.js

@@ -1,4 +1,36 @@
 import '../wedatheme/style-package/index.css';
+import loadable from '@loadable/component';
+import { fallback } from '../utils/loading-fallback';
+
+// export const Button = loadable(() => import('./button'), {fallback});
+// export const Text = loadable(() => import('./text'), {fallback});
+// export const Container = loadable(() => import('./container'), {fallback});
+// export const Image = loadable(() => import('./image'), {fallback});
+// export const Slot = loadable(() => import('./slot'), {fallback});
+// export const ScrollView = loadable(() => import('./scrollView'), {fallback});
+// export const Swiper = loadable(() => import('./swiper'), {fallback});
+// export const Modal = loadable(() => import('./modal'), {fallback});
+// export const RichText = loadable(() => import('./richText'), {fallback});
+// export const RichTextView = loadable(() => import('./richTextView'), {fallback});
+// export const Link = loadable(() => import('./link'), {fallback});
+// export const Drawer = loadable(() => import('./drawer'), {fallback});
+// export const UploaderView = loadable(() => import('./uploaderView'), {fallback});
+// // picker
+// export const Picker = loadable(() => import('./picker/picker'), {fallback});
+// export const DatePicker = loadable(() => import('./picker/datePicker'), {fallback});
+// export const TimePicker = loadable(() => import('./picker/timePicker'), {fallback});
+// // form
+// export const Form = loadable(() => import('./form/form'), {fallback});
+// export const Input = loadable(() => import('./form/input'), {fallback});
+// export const Textarea = loadable(() => import('./form/textarea'), {fallback});
+// export const Checkbox = loadable(() => import('./form/checkbox'), {fallback});
+// export const Radio = loadable(() => import('./form/radio'), {fallback});
+// export const Switch = loadable(() => import('./form/switch'), {fallback});
+// export const Select = loadable(() => import('./form/select'), {fallback});
+// export const Uploader = loadable(() => import('./form/uploader'), {fallback});
+// export const Tips = loadable(() => import('./form/tips'), {fallback});
+// export const EnumSelect = loadable(() => import('./form/enumSelect'), {fallback});
+// export const Tabs = loadable(() => import('./tabs'), {fallback});
 
 export { default as Button } from './button';
 export { default as Text } from './text';
@@ -13,7 +45,7 @@ export { default as RichTextView } from './richTextView';
 export { default as Link } from './link';
 export { default as Drawer } from './drawer';
 export { default as UploaderView } from './uploaderView';
-// picker
+
 export { default as Picker } from './picker/picker';
 export { default as DatePicker } from './picker/datePicker';
 export { default as TimePicker } from './picker/timePicker';
@@ -26,9 +58,11 @@ export { default as Radio } from './form/radio';
 export { default as Switch } from './form/switch';
 export { default as Select } from './form/select';
 export { default as Uploader } from './form/uploader';
+export { default as UploaderFile } from './form/uploaderFile';
 export { default as Tips } from './form/tips';
 export { default as Tabs } from './tabs';
 export { default as EnumSelect } from './form/enumSelect';
+
 // open
 // import Auth from './auth';