@cloudbase/weda-ui 0.2.13 → 0.2.16

package/src/web/components/form/uploaderFile/{uploadFile.pc.jsx → uploadFile.pc.tsx}

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import {
   Upload,
   ConfigProvider,
@@ -9,6 +8,7 @@ import {
   Text,
   List,
 } from 'tea-component';
+import SparkMD5 from 'spark-md5';
 import { v4 } from 'uuid';
 import {
   filterStrList,
@@ -16,11 +16,13 @@ import {
   isHttpFileID,
   transSize,
   downloadFile,
-  cutFileTitle
+  cutFileTitle,
+  transFileCloudidToName
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
+import { CommonFormPropsType } from '../types';
 
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-pc';
@@ -41,14 +43,15 @@ const FileContext = React.createContext(null);
  */
 export function UploadFilePc({
   // 系统属性
-  layout = {},
+  layout,
   id = '',
   style = {},
   labelVisible = true,
-  title = '上传文件',
+  label = '上传文件',
   requiredFlag = false,
   disabled = false,
   className = '',
+  events = { success: null, error: null, change: null },
   // 组件属性
   decorator,
   tips = '',
@@ -56,16 +59,15 @@ export function UploadFilePc({
   maxUploadCount = 9,
   maxSize = 1024,
   single = true,
-  defaultValue = [], // 默认值，和 value 同时存在
+  defaultValue = [], // 组件默认初始化值
+  value = [], // 用于模型组件中 formily 的值管理
   acceptTypes = [],
-  events = { success: null, error: null, change: null },
   downloadVisible = true,
   deleteVisible = true,
   uploadPath = 'weda-uploader',
-  value = [], // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
   onChange = null,
   isEdit = true,
-}) {
+}: IUploaderFilePc) {
   const [fileIDList, setfileIDList] = React.useState(
     filterStrList([].concat(defaultValue, value))
   ); // 上传成功文件ID列表，fileID[]
@@ -234,40 +236,37 @@ export function UploadFilePc({
     id,
     className: cls,
     style,
-    label: labelVisible ? title : null,
+    label: labelVisible ? label : 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, // 是否展示上传按钮，用户详情页面展示
-};
+export interface IUploaderFilePc extends CommonFormPropsType {
+  btnTitle?: string;
+  maxUploadCount?: number;
+  downloadVisible?: boolean;
+  deleteVisible?: boolean;
+  defaultValue?: string | string[];
+  maxSize?: number;
+  single?: boolean;
+  acceptTypes?: any[];
+  tips?: string;
+  value?: string | string[];
+  uploadPath?: string;
+  isEdit?: boolean;
+  onChange?: Function;
+}
+
+interface ITcbFileEcho {
+  fileID?: string;
+}
 
 /**
  * 基于 FileID 回显文件表格行组件
  */
-const TcbFileEcho = ({ fileID }) => {
+const TcbFileEcho = ({ fileID }: ITcbFileEcho) => {
   const [src, setSrc] = React.useState('');
   const { fileSizeObj } = React.useContext(FileContext) || {};
   React.useEffect(() => {
@@ -286,11 +285,7 @@ const TcbFileEcho = ({ 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;
+      return transFileCloudidToName(fileID);
     } else {
       return fileID;
     }
@@ -298,7 +293,9 @@ const TcbFileEcho = ({ 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-title`} title={title}>
+        {cutFileTitle(title)}
+      </div>
       <div className={`${CLASS_PREFIX}--item-size`}>
         {fileSizeObj[fileID] || '--'}
       </div>
@@ -312,10 +309,14 @@ const TcbFileEcho = ({ fileID }) => {
   );
 };
 
+interface ITcbFileUpload {
+  file?: any;
+}
+
 /**
  * 基于 File 上传文件过程表格行组件
  */
-const TcbFileUpload = ({ file }) => {
+const TcbFileUpload = ({ file }: ITcbFileUpload) => {
   const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
   const [percent, setPercent] = React.useState(0); // 上传进度
   const [status, setStatus] = React.useState('0'); // 上传状态
@@ -338,20 +339,25 @@ const TcbFileUpload = ({ 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');
+      const fileReader = new FileReader();
+      fileReader.readAsBinaryString(file);
+      fileReader.onload = async function (e) {
+        const md5Path = SparkMD5.hashBinary(e.target.result);
+        const { fileID } = await tcb.uploadFile({
+          cloudPath: `${uploadPath}/${md5Path}-${file?.name}`,
+          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);
@@ -360,7 +366,9 @@ const TcbFileUpload = ({ file }) => {
 
   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-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} />
@@ -381,10 +389,15 @@ const TcbFileUpload = ({ file }) => {
   );
 };
 
+interface IUploadFileStatus {
+  status?: string;
+  percent?: number;
+}
+
 /**
  * 上传文件状态组件
  */
-const UploadFileStatus = ({ status = '2', percent = 0 }) => {
+const UploadFileStatus = ({ status = '2', percent = 0 }: IUploadFileStatus) => {
   if (status == '1' && percent) {
     return (
       <>
@@ -401,6 +414,16 @@ const UploadFileStatus = ({ status = '2', percent = 0 }) => {
   );
 };
 
+interface IUploadFileAction {
+  status?: string;
+  fileID?: string;
+  uuid?: string;
+  src?: string;
+  file?: any;
+  onReLoad?: any;
+  onCancel?: any;
+}
+
 /**
  * 操作列组件, onChange 从最外层 UploadFilePc 传进来
  * props: { status, fileID, uuid, src, onChange }
@@ -413,7 +436,7 @@ const UploadFileAction = ({
   file = null,
   onReLoad = null,
   onCancel = null,
-}) => {
+}: IUploadFileAction) => {
   const { onChange, downloadVisible, deleteVisible, isEdit } =
     React.useContext(FileContext) || {};
 

package/src/web/components/graphicCard/index.css

@@ -0,0 +1,163 @@
+/* pc style */
+.weda-graphic-card {
+  width: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__wrapper {
+  width: 100%;
+  padding: 0 24px;
+}
+
+.weda-graphic-card .weda-graphic-card__row {
+  margin: 0;
+  padding: 20px 0;
+}
+
+.weda-graphic-card .weda-graphic-card__col {
+  padding: 0;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__col-body {
+  width: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__col .wedatea2td-grid__box,
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__col-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--left
+  .wedatea2td-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--left
+  .weda-graphic-card__col-body {
+  align-items: flex-start;
+  width: 100%;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--right
+  .wedatea2td-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--right
+  .weda-graphic-card__col-body {
+  align-items: flex-end;
+  width: 100%;
+}
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--center
+  .wedatea2td-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--center
+  .weda-graphic-card__col-body {
+  align-items: center;
+  width: 100%;
+}
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--justify
+  .wedatea2td-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--justify
+  .weda-graphic-card__col-body {
+  width: 100%;
+}
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__icon {
+  width: 100%;
+  height: 200px;
+}
+
+.weda-graphic-card .weda-graphic-card__icon .weda-graphic-card__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__detail {
+  width: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn--text {
+  font-size: 14px;
+  line-height: 22px;
+  color: #0052d9;
+  margin-right: 8px;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col
+  .weda-graphic-card__btn
+  .weda-graphic-card__btn--icon {
+  transform: rotate(180deg);
+  margin-bottom: 2px;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
+  margin-top: 20px;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
+  margin-top: 8px;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn {
+  margin-top: 20px;
+}
+
+/* h5 style */
+.weda-graphic-card-mobile .weda-graphic-card__wrapper {
+  width: 100%;
+  padding: 0 16px;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__row {
+  padding: 18px 0;
+  margin: 0 -5.5px;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col {
+  padding: 0 5.5px !important;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__detail {
+  padding: 0 !important;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__title {
+  margin-top: 16px;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__desc {
+  margin-top: 6px;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__btn {
+  margin-top: 16px;
+}