Merge pull request #213 from SuanmoSuanyangTechnology/feature/model_zy

Feature/model zy

web/src/components/Empty/PageEmpty.tsx

@@ -0,0 +1,16 @@
+import { useTranslation } from 'react-i18next'
+import pageEmptyIcon from '@/assets/images/empty/pageEmpty.png'
+import Empty from './index'
+const PageEmpty = ({ size = [240, 210] }: { size?: number | number[] }) => {
+  const { t } = useTranslation()
+  return (
+    <Empty
+      url={pageEmptyIcon}
+      title={t('empty.pageEmpty')}
+      subTitle={t('empty.pageEmptyDesc')}
+      size={size}
+      className="rb:h-full"
+    />
+  )
+}
+export default PageEmpty;

web/src/components/PageTabs/index.module.css

@@ -0,0 +1,13 @@
+.page-tabs:global(.ant-segmented) {
+  background-color: rgba(91, 97, 103, 0.08);
+  padding: 4px;
+}
+.page-tabs:global(.ant-segmented .ant-segmented-item-label) {
+  line-height: 24px;
+  min-height: 24px;
+  padding: 0 12px;
+}
+
+.page-tabs:global(.ant-segmented .ant-segmented-item-selected) {
+  box-shadow: 0px 2px 4px 0px rgba(33, 35, 50, 0.16);
+}

web/src/components/PageTabs/index.tsx

@@ -0,0 +1,18 @@
+import { type FC } from 'react';
+import { Segmented, type SegmentedProps } from 'antd';
+import styles from './index.module.css';
+
+const PageTabs: FC<SegmentedProps> = ({
+  value,
+  options,
+  onChange
+}) => {
+  return <Segmented
+    value={value}
+    options={options}
+    onChange={onChange}
+    className={styles.pageTabs}
+  />;
+};
+
+export default PageTabs;

web/src/components/RbCard/Card.tsx

@@ -1,5 +1,5 @@
 import { type FC, type ReactNode } from 'react'
-import { Card } from 'antd';
+import { Card, Tooltip } from 'antd';
 import clsx from 'clsx';
 
 interface RbCardProps {
@@ -9,7 +9,7 @@ interface RbCardProps {
   extra?: ReactNode;
   children?: ReactNode;
   avatar?: ReactNode;
-  avatarUrl?: string;
+  avatarUrl?: string | null;
   bodyPadding?: string;
   bodyClassName?: string;
   headerType?: 'border' | 'borderless' | 'borderBL' | 'borderL';
@@ -63,7 +63,7 @@ const RbCard: FC<RbCardProps> = ({
               }
             )
           }>
-            <div className="rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{title}</div>
+            <Tooltip title={title}><div className="rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{title}</div></Tooltip>
             {subTitle && <div className="rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
           </div>
         </div> : null

web/src/components/Upload/UploadImages.tsx

@@ -1,23 +1,23 @@
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Upload, Modal, Image, App } from 'antd';
+import { Upload, Image, App } from 'antd';
 import type { GetProp, UploadFile, UploadProps } from 'antd';
 // import { UploadOutlined, } from '@ant-design/icons';
 import type { UploadProps as RcUploadProps } from 'antd/es/upload/interface';
 import { useTranslation } from 'react-i18next';
 import PlusIcon from '@/assets/images/plus.svg'
 import { cookieUtils } from '@/utils/request'
+import { fileUploadUrl } from '@/api/fileStorage'
+import styles from './index.module.less'
 
-const { confirm } = Modal;
-
-interface UploadImagesProps extends Omit<UploadProps, 'onChange'> {
+interface UploadImagesProps extends Omit<UploadProps, 'onChange' | 'fileList'> {
   /** 上传接口地址 */
   action?: string;
   /** 是否支持多选 */
   multiple?: boolean;
   /** 已上传的文件列表 */
-  fileList?: UploadFile[];
+  fileList?: UploadFile[] | UploadFile;
   /** 文件列表变化回调 */
-  onChange?: (fileList: UploadFile[]) => void;
+  onChange?: (fileList?: UploadFile[] | UploadFile) => void;
   /** 禁用上传 */
   disabled?: boolean;
   /** 文件大小限制（MB） */
@@ -28,6 +28,7 @@ interface UploadImagesProps extends Omit<UploadProps, 'onChange'> {
   isAutoUpload?: boolean;
   /** 最大上传文件数 */
   maxCount?: number;
+  className?: string;
 }
 const ALL_FILE_TYPE: {
   [key: string]: string;
@@ -59,7 +60,7 @@ const getBase64 = (file: FileType): Promise<string> => {
  * 支持单文件/多文件上传、拖拽上传、文件验证、预览等功能
  */
 const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
-  action = '/api/upload',
+  action = fileUploadUrl,
   multiple = false,
   fileList: propFileList = [],
   onChange,
@@ -68,27 +69,42 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
   fileType = ['png', 'jpg', 'gif'],
   isAutoUpload = true,
   maxCount = 1,
+  className = 'rb:size-24! rb:leading-1!',
   ...props
 }, ref) => {
   const { t } = useTranslation();
-  const { message } = App.useApp()
-  const [fileList, setFileList] = useState<UploadFile[]>(propFileList);
+  const { message, modal } = App.useApp()
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [accept, setAccept] = useState<string | undefined>();
   // const [loading, setLoading] = useState(false);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
 
+  useEffect(() => {
+    if (!Array.isArray(propFileList) && typeof propFileList === 'object') {
+      setFileList([propFileList]);
+    }
+  }, [propFileList])
+
+  const updateValue = (list: UploadFile[]) => {
+    if (maxCount === 1) {
+      onChange?.(list[0])
+    } else {
+      onChange?.(list)
+    }
+  }
+
   // 处理文件移除
   const handleRemove = (file: UploadFile) => {
-    confirm({
-      title: '确定要删除此文件吗？',
-      okText: '确定',
+    modal.confirm({
+      title: t('common.confirmRemoveFile'),
+      okText: `${t('common.confirm')}`,
       okType: 'danger',
-      cancelText: '取消',
+      cancelText: `${t('common.cancel')}`,
       onOk: () => {
         const newFileList = fileList.filter((item) => item.uid !== file.uid);
         setFileList(newFileList);
-        onChange?.(newFileList);
+        updateValue(newFileList)
       },
     });
     return false; // 阻止默认删除行为，由confirm控制
@@ -100,7 +116,7 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
     if (fileSize && file.size) {
       const isLtMaxSize = (file.size / 1024 / 1024) < fileSize;
       if (!isLtMaxSize) {
-        message.error(`文件大小不能超过 ${fileSize}MB`);
+        message.error(t('common.fileSizeTip', { size: fileSize }));
         return Upload.LIST_IGNORE;
       }
     }
@@ -108,7 +124,7 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
     if (accept && accept.length > 0 && file.type) {
       const isAccept = accept.includes(file.type);
       if (!isAccept) {
-        message.error(`不支持的文件类型: ${file.type}`);
+        message.error(`${t('common.fileAcceptTip')}${file.type}`);
         return Upload.LIST_IGNORE;
       }
     }
@@ -119,7 +135,7 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
       }
       const newFileList = [...fileList, file];
       setFileList(newFileList);
-      onChange?.(newFileList);
+      updateValue(newFileList);
       return Upload.LIST_IGNORE; // 阻止自动上传
     }
 
@@ -129,17 +145,13 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
   // 处理上传状态变化
   const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
     setFileList(newFileList);
-    if (onChange) {
-      onChange(newFileList);
-    }
+    updateValue(newFileList);
   };
 
   // 清空已上传文件
   const clearFiles = () => {
     setFileList([]);
-    if (onChange) {
-      onChange([]);
-    }
+    updateValue([]);
   }
 
   const handlePreview = async (file: UploadFile) => {
@@ -167,7 +179,7 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
     fileList,
     beforeUpload,
     headers: {
-      authorization:  cookieUtils.get('authToken') || '',
+      authorization: `Bearer ${cookieUtils.get('authToken') }`,
     },
     onPreview: handlePreview,
     onRemove: handleRemove,
@@ -180,6 +192,7 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
       showRemoveIcon: true,
       showDownloadIcon: false,
     },
+    className: `${styles.imageUpload} ${className}`,
     ...props,
   };
 
@@ -193,16 +206,9 @@ const UploadImages = forwardRef<UploadImagesRef, UploadImagesProps>(({
     <>
       <Upload
         {...uploadProps}
-        style={{ 
-          width: '136px', 
-          height: '136px',
-        }}
       >
         {fileList.length < maxCount && (
-          <div className="rb:flex rb:flex-wrap rb:items-center rb:justify-center">
-            <img src={PlusIcon} className="rb:w-[32px] rb:h-[32px]" />
-            <div className="rb:mt-[12px] rb:text-[12px] rb:text-[#5B6167] rb:leading-[16px]">{t('common.clickUploadIcon')}</div>
-          </div>
+          <img src={PlusIcon} className="rb:size-7" />
         )}  
       </Upload>
       {previewImage && (

web/src/components/Upload/index.module.less

@@ -0,0 +1,7 @@
+.image-upload:global(.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container),
+.image-upload:global(.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container),
+.image-upload:global(.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-container),
+.image-upload:global(.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-container) {
+  width: 96px;
+  height: 96px;
+}