@cloudbase/weda-ui 2.0.12 → 2.0.28

package/src/web/components/form/uploader/uploader.h5.tsx

@@ -4,10 +4,9 @@ import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { useSyncValue } from '../../../utils/useSyncValue';
-import { isCloudFileID } from '../../../utils/platform';
+import { isCloudFileID, randomUuid } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
 import type { CommonFormPropsType } from '../types';
-import { v4 } from 'uuid';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -40,7 +39,7 @@ export function ImageUploaderH5({
   //上传进度
   const [progress, setProgress] = React.useState(0);
   const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
-
+  const inputValueRef = React.useRef(inputValue);
   const fileIdList = React.useMemo(() => {
     //兼容h5默认值为空时情况
     if (inputValue === null) {
@@ -94,9 +93,7 @@ export function ImageUploaderH5({
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
-          file?.name
-        }`;
+        const cloudPath = `${uploadPath}/${randomUuid()}-${file?.name}`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,

package/src/web/components/form/uploader/uploader.pc.tsx

@@ -8,10 +8,9 @@ import {
   ImagePreview,
   ConfigProvider,
 } from 'tea-component';
-import { v4 } from 'uuid';
 import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import { isCloudFileID } from '../../../utils/platform';
+import { isCloudFileID, randomUuid } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { H5UploaderProps } from './uploader.h5';
 // 默认组件类前缀
@@ -79,7 +78,7 @@ export function UploaderPCInner(props) {
   const [progress, setProgress] = React.useState(0);
   // 文件列表
   const [fileIDList, setfileIDList] = React.useState([]);
-  const fileRef = React.useRef(fileIDList);
+  const fileRef = React.useRef<string[] | string>([]);
   React.useEffect(() => {
     let initialValue = []
       .concat(defaultValue)
@@ -130,9 +129,7 @@ export function UploaderPCInner(props) {
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
-          file?.name
-        }`;
+        const cloudPath = `${uploadPath}/${randomUuid()}-${file?.name}`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,

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

@@ -87,7 +87,7 @@
 
 .weda-upload-file-pc .weda-upload-file-pc__btn-descripe {
   margin-left: 16px;
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: 20px;
   color: rgba(0, 0, 0, 0.4);
 }
@@ -103,13 +103,13 @@
 
 .weda-upload-file-pc .weda-upload-file-pc--item {
   display: flex;
-  font-size: 14px;
+  font-size: 0.875em;
 }
 
 .weda-upload-file-pc .weda-upload-file-pc--item-header {
   border: 1px solid #e7e7e7;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 0.875em;
+  line-height: 1.375em;
   color: rgba(0, 0, 0, 0.4);
   margin-top: 16px;
 }
@@ -117,8 +117,8 @@
 .weda-upload-file-pc .weda-upload-file-pc--item-body {
   border-left: 1px dashed #e7e7e7;
   border-right: 1px dashed #e7e7e7;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 0.875em;
+  line-height: 1.375em;
   color: rgba(0, 0, 0, 0.9);
 }
 
@@ -166,7 +166,7 @@
   border-color: #dcdcdc;
   color: rgba(0, 0, 0, 0.9);
   width: 88px;
-  font-size: 14px;
+  font-size: 0.875em;
 }
 
 .weda-upload-file-pc
@@ -187,8 +187,8 @@
   .weda-upload-file-pc--item
   .weda-upload-file-pc--item-action
   .wedatea2td-btn {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 0.875em;
+  line-height: 1.375em;
   color: #0052d9;
   margin-right: 12px;
 }
@@ -214,9 +214,9 @@
 .weda-upload-file-pc
   .weda-upload-file-pc--item-empty
   .weda-upload-file-pc--item {
-  font-size: 14px;
+  font-size: 0.875em;
   color: rgba(0, 0, 0, 0.4);
-  line-height: 22px;
+  line-height: 1.375em;
 }
 
 /* ----上传文件----  h5 */
@@ -236,8 +236,8 @@
   padding: 0 20px 8px 20px;
 }
 .weda-upload-file-mobile .weda-upload-file-mobile__title {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: 0.875em;
+  line-height: 1.25em;
   color: #000;
   margin-right: 20px;
   padding-top: 6px;
@@ -246,18 +246,18 @@
 .weda-upload-file-mobile .weda-upload-file-mobile__btn--weak {
   width: 88px;
   padding: 0 16px;
-  font-size: 14px;
+  font-size: 0.875em;
   color: rgba(0, 0, 0, 0.9);
   border: 1px solid #dcdcdc;
   border-radius: 3px;
-  line-height: 22px;
+  line-height: 1.375em;
 }
 
 .weda-upload-file-mobile .weda-upload-file-mobile__tips {
   display: block;
   margin-top: 8px;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.75em;
+  line-height: 1.25em;
   color: rgba(0, 0, 0, 0.4);
 }
 
@@ -331,8 +331,8 @@
 .weda-upload-file-mobile
   .weda-upload-file-mobile__item
   .weda-upload-file-mobile__file-name {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 0.875em;
+  line-height: 1.375em;
   color: rgba(0, 0, 0, 0.9);
   max-width: 6.5rem;
   overflow: hidden;
@@ -373,16 +373,16 @@
   .weda-upload-file-mobile__file-status--msg {
   width: 4.2rem;
   margin-left: 4px;
-  font-size: 12px;
-  line-height: 20px;
+  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: 12px;
-  line-height: 20px;
+  font-size: 0.75em;
+  line-height: 1.25em;
   color: rgba(0, 0, 0, 0.4);
   margin-top: 8px;
   display: flex;
@@ -415,6 +415,7 @@
 }
 .weda-upload-file-mobile .weui-uploader-mobile__input {
   position: absolute;
+  font-size: 1em;
   opacity: 0;
   width: 92px;
   height: 32px;

package/src/web/components/form/uploaderFile/uploadFile.h5.tsx

@@ -11,7 +11,6 @@ import {
   Progress,
   Tooltip,
 } from 'tea-component';
-import { v4 } from 'uuid';
 import {
   filterStrList,
   isCloudFileID,
@@ -19,6 +18,7 @@ import {
   transSize,
   downloadFile,
   transFileCloudidToName,
+  randomUuid,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
@@ -78,6 +78,7 @@ export function UploadFileH5({
   const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
   // 两次默认值不同, 需要刷新
   const prevDefaultRef = React.useRef<any>([]);
+  const fileRef = React.useRef(fileIDList);
   React.useMemo(() => {
     //有有效默认值时不刷新，解决初次渲染默认值不显示问题
     if (
@@ -103,7 +104,10 @@ export function UploadFileH5({
       onChange && onChange(pureFileIDList);
       events?.change?.({ value: pureFileIDList });
     }
-    events?.success?.({ value: pureFileIDList });
+    if (!isObjectEqual(fileRef.current, fileIDList)) {
+      events?.success?.({ value: pureFileIDList });
+      fileRef.current = fileIDList;
+    }
   }, [fileIDList]);
 
   // 外层组件类
@@ -206,13 +210,14 @@ export function UploadFileH5({
                             weui.alert(`请上传不超过1024M的文件`);
                             return false;
                           }
-                          fileList.forEach((f) => (f['_uuid'] = v4()));
+                          fileList.forEach((f) => (f['_uuid'] = randomUuid()));
                           setFileList((list) => [...list, ...fileList]);
                         }}
                       />
                       <a
                         type="weak"
                         className="wedatea2td-btn wedatea2td-btn--weak"
+                        style={{ fontSize: '1em' }}
                       >
                         点击上传
                       </a>
@@ -381,7 +386,7 @@ const TcbFileUpload = ({
     try {
       setStatus('UPLOAD_STATUS_PENDING');
       const { fileID } = await tcb.uploadFile({
-        cloudPath: `${uploadPath}/${uuid.replaceAll('-', '')}-${file?.name}`,
+        cloudPath: `${uploadPath}/${randomUuid()}-${file?.name}`,
         filePath: file,
         onUploadProgress: (progressEvent) => {
           let percent = 0;

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

@@ -8,7 +8,6 @@ import {
   Text,
   List,
 } from 'tea-component';
-import { v4 } from 'uuid';
 import {
   filterStrList,
   isCloudFileID,
@@ -17,6 +16,7 @@ import {
   downloadFile,
   cutFileTitle,
   transFileCloudidToName,
+  randomUuid,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
@@ -75,6 +75,7 @@ export function UploadFilePc({
   const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
   // 两次默认值不同, 需要刷新
   const prevDefaultRef = React.useRef<any>([]);
+  const fileRef = React.useRef(fileIDList);
   React.useMemo(() => {
     //有有效默认值时不刷新，解决初次渲染默认值不显示问题
     if (
@@ -96,11 +97,13 @@ export function UploadFilePc({
       const file = pureFileIDList[0] || '';
       onChange?.(file);
       events?.change?.({ value: file });
-      events?.success?.({ value: file });
     } else {
       onChange?.(pureFileIDList);
       events?.change?.({ value: pureFileIDList });
+    }
+    if (!isObjectEqual(fileRef.current, fileIDList)) {
       events?.success?.({ value: pureFileIDList });
+      fileRef.current = fileIDList;
     }
   }, [fileIDList]);
   // 外层组件类
@@ -128,7 +131,7 @@ export function UploadFilePc({
       } catch (e) {}
       return false;
     }
-    file['_uuid'] = v4();
+    file['_uuid'] = randomUuid();
     setFileList((list) => [...list, file]);
     return false;
   };
@@ -352,7 +355,7 @@ const TcbFileUpload = ({ file }: ITcbFileUpload) => {
     try {
       setStatus('0');
       const { fileID } = await tcb.uploadFile({
-        cloudPath: `${uploadPath}/${uuid.replaceAll('-', '')}-${file?.name}`,
+        cloudPath: `${uploadPath}/${randomUuid()}-${file?.name}`,
         filePath: file,
         onUploadProgress: (progressEvent) => {
           let percent = 0;

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

@@ -81,8 +81,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 1.1428em;
+  line-height: 1.71428em;
   text-align: center;
   color: rgba(0, 0, 0, 0.9);
   display: -webkit-box;
@@ -93,8 +93,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: rgba(0, 0, 0, 0.4);
   text-align: center;
   display: -webkit-box;
@@ -105,8 +105,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn--text {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: #0052d9;
   margin-right: 8px;
 }

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

@@ -22,8 +22,8 @@
 .weda-list-view__containor .weda-list-view__more .weda-list-view__more-text {
   padding-top: 10px;
   padding-bottom: 14px;
-  font-size: 12px;
-  line-height: 22px;
+  font-size: 0.85714em;
+  line-height: 0.85714em;
   color: rgba(0, 0, 0, 0.4);
   text-align: center;
   box-sizing: border-box;
@@ -81,8 +81,8 @@
 .weda-list-view__containor
   .weda-list-view__more
   .weda-list-view__pagination-next {
-  font-size: 12px;
-  line-height: 24px;
+  font-size: 0.85714em;
+  line-height: 1.71428em;
   color: rgba(0, 0, 0, 0.4);
   padding: 0 24px;
   cursor: pointer;
@@ -105,8 +105,8 @@
   .weda-list-view__pagination-next::after {
   position: absolute;
   content: '';
-  width: 24px;
-  height: 24px;
+  width: 1.71428em;
+  height: 1.71428em;
   top: 10px;
   opacity: 0.2;
   background-image: url(arrow-right-line.svg);
@@ -137,7 +137,7 @@
 .weda-list-view__containor
   .weda-list-view__more
   .weda-list-view__pagination-text {
-  font-size: 12px;
-  line-height: 22px;
+  font-size: 0.85714em;
+  line-height: 1.71428em;
   color: rgba(0, 0, 0, 0.4);
 }

package/src/web/components/lottery/index.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { usePlatform } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import './index.css';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import { ConfigProvider } from 'tea-component';
 import LotteryAction from './lotteryUtil';
 

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

@@ -156,36 +156,36 @@
 }
 
 .weda-grid-navigation .weda-grid-navigation__col .weda-grid-navigation__icon {
-  width: 56px;
-  height: 56px;
+  width: 4em;
+  height: 4em;
 }
 .weda-grid-navigation
   .weda-grid-navigation__col
   .weda-grid-navigation__fonticon {
-  font-size: 56px;
+  font-size: 4em;
 }
 .weda-grid-navigation
   .weda-grid-navigation__col--small
   .weda-grid-navigation__icon {
-  width: 48px;
-  height: 48px;
+  width: 3.428571em;
+  height: 3.428571em;
 }
 .weda-grid-navigation
   .weda-grid-navigation__col--small
   .weda-grid-navigation__fonticon {
-  font-size: 48px;
+  font-size: 3.428571em;
 }
 
 .weda-grid-navigation
   .weda-grid-navigation__col--big
   .weda-grid-navigation__icon {
-  width: 72px;
-  height: 72px;
+  width: 5.14285em;
+  height: 5.14285em;
 }
 .weda-grid-navigation
   .weda-grid-navigation__col--big
   .weda-grid-navigation__fonticon {
-  font-size: 72px;
+  font-size: 5.14285em;
 }
 
 .weda-grid-navigation .weda-grid-navigation__img {
@@ -194,7 +194,7 @@
 }
 
 .weda-grid-navigation .weda-grid-navigation__col .weda-grid-navigation__text {
-  font-size: 16px;
+  font-size: 1.142857em;
   /* line-height: 24px; */
   text-align: center;
   color: rgba(0, 0, 0, 0.6);
@@ -215,15 +215,15 @@
 .weda-grid-navigation
   .weda-grid-navigation__col--small
   .weda-grid-navigation__text {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
 }
 
 .weda-grid-navigation
   .weda-grid-navigation__col--big
   .weda-grid-navigation__text {
-  font-size: 20px;
-  line-height: 28px;
+  font-size: 1.42857em;
+  line-height: 2em;
 }
 
 /* h5 style */
@@ -280,36 +280,36 @@
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col
   .weda-grid-navigation__icon {
-  width: 36px;
-  height: 36px;
+  width: 2.57142em;
+  height: 2.57142em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col
   .weda-grid-navigation__fonticon {
-  font-size: 36px;
+  font-size: 2.57142em;
 }
 
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--small
   .weda-grid-navigation__icon {
-  width: 32px;
-  height: 32px;
+  width: 2.285714em;
+  height: 2.285714em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--small
   .weda-grid-navigation__fonticon {
-  font-size: 32px;
+  font-size: 2.285714em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--big
   .weda-grid-navigation__fonticon {
-  font-size: 40px;
+  font-size: 2.857142em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--big
   .weda-grid-navigation__icon {
-  width: 40px;
-  height: 40px;
+  width: 2.85714em;
+  height: 2.85714em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col
@@ -320,8 +320,8 @@
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--small
   .weda-grid-navigation__text {
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.85714em;
+  line-height: 1.42857em;
   margin-top: 4px;
 }
 

package/src/web/components/navigationBar/common.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IMenuItem, INavigationStyle } from './type';
-import { isUrl } from '../../utils/platform';
+import type { IMenuItem, INavigationStyle } from './type';
+import { isUrl, resolveStaticResourceUrl } from '../../utils/platform';
 import { IconFont } from 'tdesign-icons-react';
 const CLASS_PREFIX = 'weda-menu';
 
@@ -30,7 +30,7 @@ export const renderMenuTitle = (
   hasIcon: boolean
 ) => {
   const { menuColor, menuFontSize, showMenuIcon } = navigationStyle;
-  const { title, level, iconUrl } = item;
+  const { title, level, iconUrl, iconPath } = item;
   return (
     <span
       className="menu-text"
@@ -43,7 +43,7 @@ export const renderMenuTitle = (
       {showMenuIcon &&
         level === 0 &&
         hasIcon &&
-        renderMenuIcon(iconUrl, navigationStyle)}
+        renderMenuIcon(iconUrl, iconPath, navigationStyle)}
       {title}
     </span>
   );
@@ -57,14 +57,16 @@ export const renderLogo = (
   navigationStyle: INavigationStyle,
   className: string
 ) => {
-  const { showLogo, logoHeight, logoWidth, logoUrl } = navigationStyle;
+  const { showLogo, logoHeight, logoWidth, logoUrl, logoPath } =
+    navigationStyle;
+  const src = resolveStaticResourceUrl(logoPath) || logoUrl;
   return (
     showLogo && (
       <img
         data-testid="navigationBar-logo"
         className={className}
         style={{ width: `${logoWidth}px`, height: `${logoHeight}px` }}
-        src={logoUrl || defaultLogoUrl}
+        src={src || defaultLogoUrl}
         alt="logo"
       />
     )
@@ -93,11 +95,14 @@ export const IconShow = ({ onIcon, menuColor, menuFontSize }) => {
 // 菜单图标
 export const renderMenuIcon = (
   iconUrl: string,
+  iconPath: string,
   navigationStyle: INavigationStyle
 ) => {
   const { menuColor, menuFontSize } = navigationStyle;
   let icon = iconUrl || 'td:view-module';
+
   if (iconUrl && isUrl(iconUrl)) {
+    icon = resolveStaticResourceUrl(iconPath) || iconUrl;
     return (
       <img
         className={`${CLASS_PREFIX}__item-icon`}

package/src/web/components/navigationBar/h5Menu.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-key */
 import React, { useState } from 'react';
 import { Menu, Drawer } from 'tea-component';
-import { IMenuItem, INavigationStyle } from './type';
+import type { IMenuItem, INavigationStyle } from './type';
 import classNames from '../../utils/classnames';
 import {
   renderMenuTitle,

package/src/web/components/navigationBar/horizontalMenu.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-key */
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { NavMenu, List, Dropdown } from 'tea-component';
-import { IMenuItem, INavigationStyle } from './type';
+import type { IMenuItem, INavigationStyle } from './type';
 import { usePlatform } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import {
@@ -157,7 +157,8 @@ const HorizontalMenu: React.FC<{
                     }
                   }}
                 >
-                  {showMenuIcon && renderMenuIcon(i?.iconUrl, navigationStyle)}
+                  {showMenuIcon &&
+                    renderMenuIcon(i?.iconUrl, i?.iconPath, navigationStyle)}
                   {i?.children?.length ? (
                     <Dropdown
                       trigger={'hover'}