fix: 限制数据集只能上传zip,tgz类型的文件

react-ui/src/pages/Dataset/components/AddDatasetModal/index.tsx

@@ -4,7 +4,7 @@ import KFModal from '@/components/KFModal';
 import { CategoryData, DataSource, ResourceType, resourceConfig } from '@/pages/Dataset/config';
 import { addDataset } from '@/services/dataset/index.js';
 import { to } from '@/utils/promise';
-import { getFileListFromEvent, validateUploadFiles } from '@/utils/ui';
+import { getFileListFromEvent, limitUploadFileType, validateUploadFiles } from '@/utils/ui';
 import {
   Button,
   Form,
@@ -42,6 +42,8 @@ function AddDatasetModal({ typeList, tagList, onOk, ...rest }: AddDatasetModalPr
       Authorization: getAccessToken() || '',
     },
     defaultFileList: [],
+    accept: '.zip,.tgz',
+    beforeUpload: limitUploadFileType('zip,tgz'),
   };
 
   // 获取集群版本数据
@@ -200,7 +202,7 @@ function AddDatasetModal({ typeList, tagList, onOk, ...rest }: AddDatasetModalPr
             },
           ]}
         >
-          <Upload {...uploadProps} data={{ uuid: uuid }} accept=".zip,.tgz">
+          <Upload {...uploadProps} data={{ uuid: uuid }}>
             <Button
               className={styles['upload-button']}
               type="default"

react-ui/src/pages/Dataset/components/AddVersionModal/index.tsx

@@ -21,8 +21,9 @@ import styles from '../AddDatasetModal/index.less';
 interface AddVersionModalProps extends Omit<ModalProps, 'onOk'> {
   resourceType: ResourceType;
   resourceId: number;
-  identifier: string;
   resoureName: string;
+  owner: string;
+  identifier: string;
   is_public: boolean;
   onOk: () => void;
 }
@@ -31,6 +32,7 @@ function AddVersionModal({
   resourceType,
   resourceId,
   resoureName,
+  owner,
   identifier,
   is_public,
   onOk,
@@ -46,6 +48,8 @@ function AddVersionModal({
       Authorization: getAccessToken() || '',
     },
     defaultFileList: [],
+    beforeUpload: config.beforeUpload,
+    accept: config.uploadAccept,
   };
 
   // 上传请求
@@ -74,6 +78,7 @@ function AddVersionModal({
         id: resourceId,
         identifier,
         is_public,
+        owner,
         [config.filePropKey]: version_vos,
         ...omit(formData, 'fileList'),
         [config.sourceParamKey]: DataSource.Create,
@@ -83,7 +88,7 @@ function AddVersionModal({
   };
 
   const name = config.name;
-  const accept = config.uploadAccept;
+
   return (
     <KFModal
       {...rest}
@@ -170,7 +175,7 @@ function AddVersionModal({
             },
           ]}
         >
-          <Upload {...uploadProps} data={{ uuid: uuid }} accept={accept}>
+          <Upload {...uploadProps} data={{ uuid: uuid }}>
             <Button
               className={styles['upload-button']}
               type="default"

react-ui/src/pages/Dataset/components/CategoryItem/index.less

@@ -3,8 +3,7 @@
   flex-direction: column;
   align-items: center;
   width: 92px;
-  height: 62px;
-  padding: 11px 8px 7px;
+  padding: 10px 8px 8px;
   color: @text-color;
   font-size: 12px;
   border: 1px solid rgba(22, 100, 255, 0.05);
@@ -17,14 +16,6 @@
   &__active-icon {
     display: none;
   }
-  &__name {
-    width: 100%;
-    margin-top: 4px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-align: center;
-    text-overflow: ellipsis;
-  }
 
   &:hover,
   &--active {

react-ui/src/pages/Dataset/components/CategoryItem/index.tsx

@@ -1,3 +1,4 @@
+import { Typography } from 'antd';
 import classNames from 'classnames';
 import { CategoryData, ResourceType, resourceConfig } from '../../config';
 import styles from './index.less';
@@ -32,7 +33,13 @@ function CategoryItem({ resourceType, item, isSelected, onClick }: CategoryItemP
         alt=""
         draggable={false}
       />
-      <span className={styles['category-item__name']}>{item.name}</span>
+      <Typography.Text
+        ellipsis={{ tooltip: item.name }}
+        style={{ color: 'inherit', marginTop: '4px' }}
+      >
+        {item.name}
+      </Typography.Text>
+      {/* <span className={styles['category-item__name']}>{item.name}</span> */}
     </div>
   );
 }

react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx

@@ -119,6 +119,7 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => {
       resourceType: resourceType,
       resourceId: resourceId,
       resoureName: info.name,
+      owner: info.owner,
       identifier: info.identifier,
       is_public: info.is_public,
       onOk: () => {

react-ui/src/pages/Dataset/config.tsx

@@ -14,7 +14,8 @@ import {
   getModelList,
   getModelVersionList,
 } from '@/services/dataset/index.js';
-import type { TabsProps } from 'antd';
+import { limitUploadFileType } from '@/utils/ui';
+import type { TabsProps, UploadFile } from 'antd';
 
 export enum ResourceType {
   Model = 'Model', // 模型
@@ -49,6 +50,7 @@ type ResourceTypeInfo = {
   addBtnTitle: string; // 新增按钮的title
   uploadAction: string; // 上传接口 url
   uploadAccept?: string; // 上传文件类型
+  beforeUpload?: (file: UploadFile) => boolean | string;
   downloadAllAction: string; // 批量下载接口 url
   downloadSingleAction: string; // 单个下载接口 url
 };
@@ -87,6 +89,7 @@ export const resourceConfig: Record<ResourceType, ResourceTypeInfo> = {
     addBtnTitle: '新建数据集',
     uploadAction: '/api/mmp/newdataset/upload',
     uploadAccept: '.zip,.tgz',
+    beforeUpload: limitUploadFileType('zip,tgz'),
     downloadAllAction: '/api/mmp/newdataset/downloadAllFiles',
     downloadSingleAction: '/api/mmp/newdataset/downloadSingleFile',
   },

react-ui/src/utils/ui.tsx

@@ -8,7 +8,7 @@ import { removeAllPageCacheState } from '@/hooks/pageCacheState';
 import themes from '@/styles/theme.less';
 import { type ClientInfo } from '@/types';
 import { history } from '@umijs/max';
-import { Modal, message, type ModalFuncProps, type UploadFile } from 'antd';
+import { Modal, Upload, message, type ModalFuncProps, type UploadFile } from 'antd';
 import { closeAllModals } from './modal';
 import SessionStorage from './sessionStorage';
 
@@ -52,23 +52,6 @@ export function modalConfirm({
   });
 }
 
-// 从事件中获取上传文件列表，用于 Upload + Form 中
-export const getFileListFromEvent = (e: any) => {
-  const fileList: UploadFile[] = (Array.isArray(e) ? e : e?.fileList) || [];
-  return fileList.map((item) => {
-    if (item.status === 'done') {
-      const { response } = item;
-      if (response?.code !== 200) {
-        return {
-          ...item,
-          status: 'error',
-        };
-      }
-    }
-    return item;
-  });
-};
-
 /**
  * 跳转到登录页
  * @param toHome 是否跳转到首页
@@ -97,6 +80,23 @@ export const gotoOAuth2 = () => {
   }
 };
 
+// 从事件中获取上传文件列表，用于 Upload + Form 中
+export const getFileListFromEvent = (e: any) => {
+  const fileList: UploadFile[] = (Array.isArray(e) ? e : e?.fileList) || [];
+  return fileList.map((item) => {
+    if (item.status === 'done') {
+      const { response } = item;
+      if (response?.code !== 200) {
+        return {
+          ...item,
+          status: 'error',
+        };
+      }
+    }
+    return item;
+  });
+};
+
 /**
  * 验证文件上传
  *
@@ -128,6 +128,20 @@ export const validateUploadFiles = (files: UploadFile[], required: boolean = tru
   return !hasError;
 };
 
+// 限制上传文件类型
+export const limitUploadFileType = (type: string) => {
+  return (file: UploadFile): boolean | string => {
+    const acceptTypes = type.split(',').map((item) => item.trim());
+    const fileType = file.name.split('.').pop()?.trim();
+    if (!(fileType && acceptTypes.includes(fileType))) {
+      message.error(`文件类型不正确，只支持 "${acceptTypes.join('、')}" 类型的文件`);
+      file.status = 'error';
+      return Upload.LIST_IGNORE;
+    }
+    return true;
+  };
+};
+
 /**
  * 滚动到底部
  *