onClick(item)}
+ >
+ 
+ 
+ {item.name}
+
+ );
+}
+
+export default CategoryItem;
diff --git a/react-ui/src/pages/Dataset/components/CategoryList/index.less b/react-ui/src/pages/Dataset/components/CategoryList/index.less
new file mode 100644
index 00000000..5f925607
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/CategoryList/index.less
@@ -0,0 +1,22 @@
+.category-list {
+ width: 340px;
+ height: 100%;
+ margin-right: 10px;
+ padding: 15px 0;
+ background: white;
+ border-radius: 4px;
+ box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
+
+ &__content {
+ height: calc(100% - 32px - 15px);
+ margin-top: 15px;
+ padding-left: 20px;
+ overflow-y: auto;
+
+ &__title {
+ margin-bottom: 15px;
+ color: @text-color;
+ font-size: 14px;
+ }
+ }
+}
diff --git a/react-ui/src/pages/Dataset/components/CategoryList/index.tsx b/react-ui/src/pages/Dataset/components/CategoryList/index.tsx
new file mode 100644
index 00000000..cb37f435
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/CategoryList/index.tsx
@@ -0,0 +1,71 @@
+import { Flex, Input } from 'antd';
+import { CategoryData, ResourceType, resourceConfig } from '../../type';
+import CategoryItem from '../CategoryItem';
+import styles from './index.less';
+
+export type CategoryValue = {
+ dataType: number | undefined;
+ dataTag: number | undefined;
+};
+
+type CategoryProps = {
+ resourceType: ResourceType; // 资源类型，数据集还是模型
+ typeList: CategoryData[];
+ tagList: CategoryData[];
+ activeType?: number;
+ activeTag?: number;
+ onTypeSelect: (value: CategoryData) => void;
+ onTagSelect: (value: CategoryData) => void;
+ onSearch: (value: string) => void;
+};
+
+function CategoryList({
+ resourceType,
+ typeList,
+ tagList,
+ activeType,
+ activeTag,
+ onTypeSelect,
+ onTagSelect,
+ onSearch,
+}: CategoryProps) {
+ return (
+
+
+ {item.name}
+
+
+ );
+}
+
+export default CategoryList;
diff --git a/react-ui/src/pages/Dataset/components/ResourceList/index.less b/react-ui/src/pages/Dataset/components/ResourceList/index.less
new file mode 100644
index 00000000..91407e80
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourceList/index.less
@@ -0,0 +1,39 @@
+.resource-list {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ height: 100%;
+ padding: 20px 0;
+ background: white;
+ box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
+
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 32px;
+ margin-bottom: 30px;
+ padding: 0 30px;
+ color: @text-color;
+ font-size: 15px;
+ }
+
+ &__content {
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ gap: 20px;
+ align-content: flex-start;
+ width: 100%;
+ margin-bottom: 30px;
+ padding: 0 30px;
+ overflow-y: auto;
+ }
+
+ :global {
+ .ant-pagination {
+ margin-right: 30px;
+ text-align: right;
+ }
+ }
+}
diff --git a/react-ui/src/pages/Dataset/components/ResourceList/index.tsx b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx
new file mode 100644
index 00000000..b07cb5bf
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx
@@ -0,0 +1,210 @@
+import KFIcon from '@/components/KFIcon';
+import { CommonTabKeys } from '@/enums';
+import AddModelModal from '@/pages/Model/components/AddModelModal';
+import { openAntdModal } from '@/utils/modal';
+import { to } from '@/utils/promise';
+import { modalConfirm } from '@/utils/ui';
+import { useNavigate } from '@umijs/max';
+import { Button, Input, Pagination, PaginationProps, message } from 'antd';
+import { Ref, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { CategoryData, ResourceData, ResourceType, resourceConfig } from '../../type';
+import AddDatasetModal from '../AddDatasetModal';
+import ResourceItem from '../Resourcetem';
+import styles from './index.less';
+
+export type ResourceListRef = {
+ reset: () => void;
+};
+
+type ResourceListProps = {
+ resourceType: ResourceType;
+ dataType?: number;
+ dataTag?: number;
+ isPublic: boolean;
+ typeList: CategoryData[];
+ tagList: CategoryData[];
+ initialSearchText?: string;
+ initialPagination?: PaginationProps;
+ setCacheState: (state?: any) => void;
+};
+
+function ResourceList(
+ {
+ resourceType,
+ dataType,
+ dataTag,
+ typeList,
+ tagList,
+ isPublic,
+ initialSearchText,
+ initialPagination,
+ setCacheState,
+ }: ResourceListProps,
+ ref: Ref
+
+
+
+ {typeList?.map((item) => (
+
+
+ {tagList?.map((item) => (
+
+
+
+ {resourceConfig[resourceType].typeTitle}
+
+
+ {resourceConfig[resourceType].tagTitle}
+
+
+
+ );
+}
+
+export default forwardRef(ResourceList);
diff --git a/react-ui/src/pages/Dataset/components/ResourcePage/index.less b/react-ui/src/pages/Dataset/components/ResourcePage/index.less
new file mode 100644
index 00000000..2288dbe6
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourcePage/index.less
@@ -0,0 +1,8 @@
+.resource-page {
+ height: 100%;
+ &__tabs-container {
+ height: 50px;
+ padding-left: 27px;
+ background-image: url(@/assets/img/page-title-bg.png);
+ }
+}
diff --git a/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx b/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx
new file mode 100644
index 00000000..c956e4be
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx
@@ -0,0 +1,113 @@
+import { CommonTabKeys } from '@/enums';
+import { useCacheState } from '@/hooks/pageCacheState';
+import { getAssetIcon } from '@/services/dataset/index.js';
+import { to } from '@/utils/promise';
+import { Flex, Tabs, type TabsProps } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { CategoryData, ResourceType, resourceConfig } from '../../type';
+import CategoryList from '../CategoryList';
+import ResourceList, { ResourceListRef } from '../ResourceList';
+import styles from './index.less';
+
+type ResourcePageProps = {
+ resourceType: ResourceType; // 资源类型，数据集还是模型
+};
+
+function ResourcePage({ resourceType }: ResourcePageProps) {
+ const [cacheState, setCacheState] = useCacheState();
+ const [activeTab, setActiveTab] = useState
+ 数据总数：{total}个
+
+
+ setInputText(e.target.value)}
+ value={inputText}
+ />
+ {!isPublic && (
+ }
+ >
+ {resourceConfig[resourceType].addBtnTitle}
+
+ )}
+
+
+ {dataList?.map((item) => (
+
+
+
+
+
+ );
+}
+
+export default ResourcePage;
diff --git a/react-ui/src/pages/Dataset/components/Resourcetem/index.less b/react-ui/src/pages/Dataset/components/Resourcetem/index.less
new file mode 100644
index 00000000..edd97f85
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/Resourcetem/index.less
@@ -0,0 +1,61 @@
+.resource-item {
+ position: relative;
+ width: calc(25% - 15px);
+ padding: 20px;
+ background: white;
+ border: 1px solid #eaeaea;
+ border-radius: 4px;
+ cursor: pointer;
+
+ @media screen and (max-width: 1860px) {
+ & {
+ width: calc(33.33% - 13.33px);
+ }
+ }
+
+ &__name {
+ position: relative;
+ display: inline-block;
+ height: 24px;
+ margin: 0 10px 0 0 !important;
+ color: @text-color;
+ font-size: 16px;
+ }
+
+ &__description {
+ height: 44px;
+ margin-bottom: 20px;
+ color: @text-color-secondary;
+ font-size: 14px;
+ .multiLine(2);
+ }
+ &__time {
+ display: flex;
+ flex: 0 1 content;
+ align-items: center;
+ width: 100%;
+ color: #808080;
+ font-size: 13px;
+ }
+
+ &:hover {
+ border-color: @primary-color;
+ box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
+
+ .resource-item__name {
+ color: @primary-color;
+ }
+ }
+}
+
+.resource-item__name {
+ &::after {
+ position: absolute;
+ top: 14px;
+ left: 0;
+ width: 100%;
+ height: 6px;
+ background: linear-gradient(to right, rgba(22, 100, 255, 0.3) 0, rgba(22, 100, 255, 0) 100%);
+ content: '';
+ }
+}
diff --git a/react-ui/src/pages/Dataset/components/Resourcetem/index.tsx b/react-ui/src/pages/Dataset/components/Resourcetem/index.tsx
new file mode 100644
index 00000000..3a261a48
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/Resourcetem/index.tsx
@@ -0,0 +1,54 @@
+import clock from '@/assets/img/clock.png';
+import creatByImg from '@/assets/img/creatBy.png';
+import KFIcon from '@/components/KFIcon';
+import { formatDate } from '@/utils/date';
+import { Button, Flex, Typography } from 'antd';
+import { ResourceData } from '../../type';
+import styles from './index.less';
+
+type ResourceItemProps = {
+ item: ResourceData;
+ isPublic: boolean;
+ onRemove: (item: ResourceData) => void;
+ onClick: (item: ResourceData) => void;
+};
+
+function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps) {
+ return (
+
+
+ onClick(item)}>
+
+
+ {item.name}
+
+ {!isPublic && (
+
+ )}
+
+
+
+
+ );
+}
+
+export default ResourceItem;
diff --git a/react-ui/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/datasetIntro.jsx
index 91aee652..16128aeb 100644
--- a/react-ui/src/pages/Dataset/datasetIntro.jsx
+++ b/react-ui/src/pages/Dataset/datasetIntro.jsx
@@ -1,5 +1,6 @@
import { getAccessToken } from '@/access';
import KFIcon from '@/components/KFIcon';
+import KFModal from '@/components/KFModal';
import {
addDatasetVersionDetail,
deleteDatasetVersion,
@@ -8,11 +9,12 @@ import {
getDatasetVersionsById,
} from '@/services/dataset/index.js';
import { downLoadZip } from '@/utils/downloadfile';
+import { modalConfirm } from '@/utils/ui';
import { UploadOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, message } from 'antd';
+import { useParams, useSearchParams } from '@umijs/max';
+import { Button, Form, Input, Select, Table, Tabs, Upload, message } from 'antd';
import moment from 'moment';
import { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
import Styles from './index.less';
const { Search } = Input;
const { TabPane } = Tabs;
@@ -53,9 +55,11 @@ const Dataset = () => {
const [version, setVersion] = useState(null);
const [versionList, setVersionList] = useState([]);
const locationParams = useParams(); //新版本获取路由参数接口
+ const [searchParams] = useSearchParams();
const [wordList, setWordList] = useState([]);
const [activeTabKey, setActiveTabKey] = useState('1');
const [uuid, setUuid] = useState(Date.now());
+ const isPublic = searchParams.get('isPublic') === 'true';
const getDatasetByDetail = () => {
getDatasetById(locationParams.id).then((ret) => {
console.log(ret);
@@ -77,6 +81,9 @@ const Dataset = () => {
);
setVersion(ret.data[0]);
getDatasetVersions({ version: ret.data[0], dataset_id: locationParams.id });
+ } else {
+ setVersion(null);
+ setWordList([]);
}
});
};
@@ -102,21 +109,9 @@ const Dataset = () => {
downLoadZip(`/api/mmp/dataset/downloadAllFiles`, { dataset_id: locationParams.id, version });
};
const deleteDataset = () => {
- Modal.confirm({
- title: (
- {item.description}
+
+ 
+ {item.create_by}
+
+
+ 
+ 最近更新: {formatDate(item.update_time, 'YYYY-MM-DD')}
+
+
- 
-
- ),
- content:
- 删除后，该数据集版本将不可恢复
- 是否确认删除?
,
- okText: '确认',
- cancelText: '取消',
-
+ modalConfirm({
+ title: '删除后，该数据集版本将不可恢复',
+ content: '是否确认删除?',
onOk: () => {
deleteDatasetVersion({ dataset_id: locationParams.id, version }).then((ret) => {
getDatasetVersionList();
@@ -264,15 +259,17 @@ const Dataset = () => {
- }
- >
- 删除
-
+ {!isPublic && (
+ }
+ >
+ 删除
+
+ )}
- 
- {dialogTitle}
-
- }
+
-
-
- );
+const DatasetPage = () => {
+ return
-
-
-
-
-
-
-
-
-
-
-
- 分类
-
- {datasetTypeList && datasetTypeList.length > 0
- ? datasetTypeList.map((item) => {
- return (
-
-
-
- );
- })
- : ''}
- {
- chooseDatasetType(e, item);
- }}
- >
- 
- 
- {item.name}
-
-
-
- {item.name}
- 研究方向/应用领域
-
- {datasetDirectionList && datasetDirectionList.length > 0
- ? datasetDirectionList.map((item) => {
- return (
-
-
-
- );
- })
- : ''}
- {
- chooseDatasetTag(e, item);
- }}
- >
-
-
- {item.name}
-
-
-
- {item.name}
-
-
-
- 数据总数：{total}个
-
-
-
-
- {datasetList && datasetList.length > 0
- ? datasetList.map((item) => {
- return (
- Demo */}
-
- routeToIntro(e, item)}>
- {item.name}
- ![]()
{
- e.stopPropagation();
- modalConfirm({
- title: '确定删除该条数据集实例吗？',
- onOk: () => {
- deleteDataset(item.id).then((ret) => {
- if (ret.code === 200) {
- message.success('删除成功');
- getModelLists(queryFlow);
- } else {
- message.error(ret.msg);
- }
- });
- },
- });
- }}
- className={Styles.dropdown}
- style={{ width: '17px', marginRight: '6px' }}
- src={deleteIcon}
- alt=""
- />
-
- );
- })
- : ''}
- {/* {item.description}
-
-
-
- {item.create_by}
-
-
-
- 最近更新: {moment(item.update_time).format('YYYY-MM-DD')}
-
-
- {dialogTitle}
-
- }
- open={isModalOpen}
- className={Styles.modal}
- okButtonProps={{
- htmlType: 'submit',
- form: 'form',
- }}
- onCancel={handleCancel}
- >
-
-
-
-
- );
-};
-export default PublicData;
diff --git a/react-ui/src/pages/Dataset/type.tsx b/react-ui/src/pages/Dataset/type.tsx
new file mode 100644
index 00000000..91808ea2
--- /dev/null
+++ b/react-ui/src/pages/Dataset/type.tsx
@@ -0,0 +1,118 @@
+import KFIcon from '@/components/KFIcon';
+import { CommonTabKeys } from '@/enums';
+import {
+ deleteDataset,
+ deleteModel,
+ getDatasetList,
+ getDatasetVersionIdList,
+ getDatasetVersionsById,
+ getModelList,
+ getModelVersionIdList,
+ getModelVersionsById,
+} from '@/services/dataset/index.js';
+import type { TabsProps } from 'antd';
+
+export enum ResourceType {
+ Model = 'Model', // 模型
+ Dataset = 'Dataset', // 数据集
+}
+
+type ResourceTypeKeys = keyof typeof ResourceType;
+type ResourceTypeValues = (typeof ResourceType)[ResourceTypeKeys];
+
+export type ResourceTypeInfo = {
+ getList: (params: any) => Promise
-
-
-
- 分类
-
- {datasetTypeList && datasetTypeList.length > 0
- ? datasetTypeList.map((item) => {
- return (
-
-
-
- );
- })
- : ''}
- {
- chooseDatasetType(e, item);
- }}
- >
-
-
- {item.name}
-
-
-
- {item.name}
- 研究方向/应用领域
-
- {datasetDirectionList && datasetDirectionList.length > 0
- ? datasetDirectionList.map((item) => {
- return (
-
-
-
- );
- })
- : ''}
- {
- chooseDatasetTag(e, item);
- }}
- >
-
-
- {item.name}
-
-
-
- {item.name}
-
-
-
- 数据总数：{total}个
-
-
-
-
- {datasetList && datasetList.length > 0
- ? datasetList.map((item) => {
- return (
- Demo */}
-
- routeToIntro(e, item)}>
- {item.name}
- ![]()
{
- e.stopPropagation();
- modalConfirm({
- title: '确定删除该条数据集实例吗？',
- onOk: () => {
- deleteDataset(item.id).then((ret) => {
- if (ret.code === 200) {
- message.success('删除成功');
- getModelLists(queryFlow);
- } else {
- message.error(ret.msg);
- }
- });
- },
- });
- }}
- className={Styles.dropdown}
- style={{ width: '17px', marginRight: '6px' }}
- src={deleteIcon}
- alt=""
- />
-
- );
- })
- : ''}
- {/* {item.description}
-
-
- {item.create_by}
-
-
-
- 最近更新: {moment(item.update_time).format('YYYY-MM-DD')}
-
-
diff --git a/react-ui/src/pages/Mirror/create.less b/react-ui/src/pages/Mirror/create.less
index 902e2875..84f4c197 100644
--- a/react-ui/src/pages/Mirror/create.less
+++ b/react-ui/src/pages/Mirror/create.less
@@ -9,9 +9,9 @@
background-color: white;
border-radius: 10px;
- &__title {
- display: flex;
- align-items: center;
+ &__type {
+ color: @text-color;
+ font-size: @font-size-input-lg;
}
}
}
diff --git a/react-ui/src/pages/Mirror/create.tsx b/react-ui/src/pages/Mirror/create.tsx
index 8ac38f6c..f2d1f86f 100644
--- a/react-ui/src/pages/Mirror/create.tsx
+++ b/react-ui/src/pages/Mirror/create.tsx
@@ -12,7 +12,7 @@ import { CommonTabKeys } from '@/enums';
import { createMirrorReq } from '@/services/mirror';
import { to } from '@/utils/promise';
import { getSessionItemThenRemove, mirrorNameKey } from '@/utils/sessionStorage';
-import { getFileListFromEvent } from '@/utils/ui';
+import { getFileListFromEvent, validateUploadFiles } from '@/utils/ui';
import { useNavigate } from '@umijs/max';
import { Button, Col, Form, Input, Row, Upload, UploadFile, message, type UploadProps } from 'antd';
import { omit } from 'lodash';
@@ -75,30 +75,16 @@ function MirrorCreate() {
};
} else {
const fileList = formData['fileList'] ?? [];
- if (fileList.length === 0) {
- message.error('请上传文件');
- return;
+ if (validateUploadFiles(fileList)) {
+ const file = fileList[0];
+ params = {
+ ...omit(formData, ['fileList', 'upload_type']),
+ path: file.response.data.url,
+ file_size: file.response.data.fileSize,
+ upload_type: 1,
+ image_type: 0,
+ };
}
- const file = fileList[0];
- if (file.status === 'uploading') {
- message.error('请等待文件上传完成');
- return;
- } else if (file.status === 'error') {
- message.error('文件上传失败，请重新上传文件');
- return;
- }
- if (!file.response || !file.response.data) {
- message.error('文件上传失败，请重新上传文件');
- return;
- }
-
- params = {
- ...omit(formData, ['fileList', 'upload_type']),
- path: file.response.data.url,
- file_size: file.response.data.fileSize,
- upload_type: 1,
- image_type: 0,
- };
}
const [res] = await to(createMirrorReq(params));
@@ -118,6 +104,7 @@ function MirrorCreate() {
navgite(-1);
};
+ // 上传前认证
const beforeUpload: UploadProps['beforeUpload'] = () => {
const fileList = form.getFieldValue('fileList');
if (Array.isArray(fileList) && fileList.length >= 1) {
@@ -134,12 +121,13 @@ function MirrorCreate() {
- }
- open={isModalOpen}
- className={Styles.modal}
- okButtonProps={{
- htmlType: 'submit',
- form: 'form',
- }}
- onCancel={handleCancel}
- >
-
-
-
- );
-};
-export default PublicData;
diff --git a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx
index e073a449..20c265f2 100644
--- a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx
+++ b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx
@@ -40,7 +40,6 @@ export type SelectorTypeInfo = {
getFiles: (params: any) => Promise;
handleVersionResponse: (res: any) => any[];
modalIcon: string;
- buttonIcon: string;
name: string;
litReqParamKey: 'available_range' | 'image_type';
fileReqParamKey: 'models_id' | 'dataset_id';
@@ -71,7 +70,6 @@ export const selectorTypeData: Record res.data || [],
name: '模型',
modalIcon: modelImg,
- buttonIcon: 'local:model-select-button',
litReqParamKey: 'available_range',
fileReqParamKey: 'models_id',
tabItems: [
@@ -92,7 +90,6 @@ export const selectorTypeData: Record res.data || [],
name: '数据集',
modalIcon: datasetImg,
- buttonIcon: 'local:dataset-select-button',
litReqParamKey: 'available_range',
fileReqParamKey: 'dataset_id',
tabItems: [
@@ -115,7 +112,6 @@ export const selectorTypeData: Record
- {/* //{contextHolder} */}
);
},
diff --git a/react-ui/src/pages/Pipeline/editPipeline/props.jsx b/react-ui/src/pages/Pipeline/editPipeline/props.jsx
index 58127381..df77d981 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/props.jsx
+++ b/react-ui/src/pages/Pipeline/editPipeline/props.jsx
@@ -142,41 +142,37 @@ const Props = forwardRef(({ onParentChange }, ref) => {
type = ResourceSelectorType.Mirror;
break;
}
- const { close } = openAntdModal(
- ResourceSelectorModal,
- {
- type,
- defaultExpandedKeys: resource ? [resource.id] : [],
- defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [],
- defaultActiveTab: resource?.activeTab,
- onOk: (res) => {
- if (res) {
- if (type === ResourceSelectorType.Mirror) {
- form.setFieldValue(name, res);
- } else {
- const jsonObj = pick(res, ['id', 'version', 'path']);
- const value = JSON.stringify(jsonObj);
- form.setFieldValue(name, value);
- }
-
- if (type === ResourceSelectorType.Dataset) {
- setSelectedDataset(res);
- } else if (type === ResourceSelectorType.Model) {
- setSelectedModel(res);
- }
+ const { close } = openAntdModal(ResourceSelectorModal, {
+ type,
+ defaultExpandedKeys: resource ? [resource.id] : [],
+ defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [],
+ defaultActiveTab: resource?.activeTab,
+ onOk: (res) => {
+ if (res) {
+ if (type === ResourceSelectorType.Mirror) {
+ form.setFieldValue(name, res);
} else {
- if (type === ResourceSelectorType.Dataset) {
- setSelectedDataset(null);
- } else if (type === ResourceSelectorType.Model) {
- setSelectedModel(null);
- }
- form.setFieldValue(name, '');
+ const jsonObj = pick(res, ['id', 'version', 'path']);
+ const value = JSON.stringify(jsonObj);
+ form.setFieldValue(name, value);
+ }
+
+ if (type === ResourceSelectorType.Dataset) {
+ setSelectedDataset(res);
+ } else if (type === ResourceSelectorType.Model) {
+ setSelectedModel(res);
}
- close();
- },
+ } else {
+ if (type === ResourceSelectorType.Dataset) {
+ setSelectedDataset(null);
+ } else if (type === ResourceSelectorType.Model) {
+ setSelectedModel(null);
+ }
+ form.setFieldValue(name, '');
+ }
+ close();
},
- true,
- );
+ });
};
// 获取选择数据集、模型后面按钮 icon
diff --git a/react-ui/src/pages/Pipeline/index.jsx b/react-ui/src/pages/Pipeline/index.jsx
index 883b10ff..fcbdc03e 100644
--- a/react-ui/src/pages/Pipeline/index.jsx
+++ b/react-ui/src/pages/Pipeline/index.jsx
@@ -1,4 +1,5 @@
import KFIcon from '@/components/KFIcon';
+import KFModal from '@/components/KFModal';
import {
addWorkflow,
cloneWorkflow,
@@ -9,12 +10,13 @@ import {
} from '@/services/pipeline/index.js';
import themes from '@/styles/theme.less';
import { modalConfirm } from '@/utils/ui';
-import { Button, ConfigProvider, Form, Input, Modal, Space, Table, message } from 'antd';
+import { Button, ConfigProvider, Form, Input, Space, Table, message } from 'antd';
import classNames from 'classnames';
import momnet from 'moment';
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Styles from './index.less';
+
const { TextArea } = Input;
const Pipeline = () => {
const [form] = Form.useForm();
@@ -168,7 +170,7 @@ const Pipeline = () => {
key="clone"
icon={
-
- {dialogTitle}
-
- }
+ 今日新增数量：5
- 今日新增数量：5
*/}
+ {item.title}
diff --git a/react-ui/src/pages/Workspace/components/ExperimentChart/index.less b/react-ui/src/pages/Workspace/components/ExperimentChart/index.less
index 3891b3f4..a723c650 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentChart/index.less
+++ b/react-ui/src/pages/Workspace/components/ExperimentChart/index.less
@@ -2,6 +2,6 @@
width: 295px;
min-width: 295px;
height: 140px;
- background-color: @workspace-background;
+ background: @workspace-background;
border-radius: 4px;
}
diff --git a/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx b/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx
index f4d30fe1..89c1f34d 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx
+++ b/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx
@@ -140,6 +140,7 @@ function ExperimentChart({ chartData, style }: ExperimentChartProps) {
itemStyle: {
borderRadius: 3,
},
+ minAngle: 5,
label: {
show: false,
},
@@ -152,11 +153,11 @@ function ExperimentChart({ chartData, style }: ExperimentChartProps) {
show: false,
},
data: [
- { value: chartData.Failed, name: '失败' },
- { value: chartData.Succeeded, name: '成功' },
- { value: chartData.Terminated, name: '中止' },
- { value: chartData.Pending, name: '等待' },
- { value: chartData.Running, name: '运行中' },
+ { value: chartData.Failed > 0 ? chartData.Failed : null, name: '失败' },
+ { value: chartData.Succeeded > 0 ? chartData.Succeeded : null, name: '成功' },
+ { value: chartData.Terminated > 0 ? chartData.Terminated : null, name: '中止' },
+ { value: chartData.Pending > 0 ? chartData.Pending : null, name: '等待' },
+ { value: chartData.Running > 0 ? chartData.Running : null, name: '运行中' },
],
},
{
diff --git a/react-ui/src/pages/Workspace/components/ExperimentTable/index.less b/react-ui/src/pages/Workspace/components/ExperimentTable/index.less
index 85c5e42d..fc83b21d 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentTable/index.less
+++ b/react-ui/src/pages/Workspace/components/ExperimentTable/index.less
@@ -3,7 +3,7 @@
min-width: 500px;
height: 140px;
padding: 12px 24px;
- background-color: @workspace-background;
+ background: @workspace-background;
border-radius: 4px;
&__header {
@@ -36,15 +36,15 @@
}
&__duration {
- width: 25%;
+ width: 30%;
}
&__date {
- width: 35%;
+ width: calc(50% - 60px);
}
&__operation {
- width: 20%;
+ width: 60px;
:global {
.ant-btn-link {
diff --git a/react-ui/src/pages/Workspace/components/TotalStatistics/index.less b/react-ui/src/pages/Workspace/components/TotalStatistics/index.less
index aec9945b..d8943328 100644
--- a/react-ui/src/pages/Workspace/components/TotalStatistics/index.less
+++ b/react-ui/src/pages/Workspace/components/TotalStatistics/index.less
@@ -4,7 +4,7 @@
justify-content: center;
width: 400px;
height: 140px;
- background-color: @workspace-background;
+ background: @workspace-background;
border-radius: 4px;
&__icon {
@@ -26,11 +26,7 @@
left: 0;
width: 79px;
height: 6px;
- background-color: linear-gradient(
- 87.07deg,
- rgba(22, 100, 255, 0.6) 0%,
- rgba(22, 100, 255, 0) 100%
- );
+ background: linear-gradient(87.07deg, rgba(22, 100, 255, 0.6) 0%, rgba(22, 100, 255, 0) 100%);
}
&__count {
diff --git a/react-ui/src/pages/Workspace/components/UserSpace/index.less b/react-ui/src/pages/Workspace/components/UserSpace/index.less
index b95fdf6d..1c36f6b3 100644
--- a/react-ui/src/pages/Workspace/components/UserSpace/index.less
+++ b/react-ui/src/pages/Workspace/components/UserSpace/index.less
@@ -20,8 +20,7 @@
&__avatar {
position: relative;
top: -28px;
- width: 56px;
- height: 56px;
+ background-color: white;
}
&__name {
@@ -56,10 +55,5 @@
background-color: rgba(153, 153, 153, 0.13);
border-radius: 50%;
}
-
- &__user {
- width: 36px;
- height: 36px;
- }
}
}
diff --git a/react-ui/src/pages/Workspace/components/UserSpace/index.tsx b/react-ui/src/pages/Workspace/components/UserSpace/index.tsx
index 503ea9fc..bd4bf323 100644
--- a/react-ui/src/pages/Workspace/components/UserSpace/index.tsx
+++ b/react-ui/src/pages/Workspace/components/UserSpace/index.tsx
@@ -1,5 +1,5 @@
import { useModel } from '@umijs/max';
-import { Divider, Flex, Space } from 'antd';
+import { Avatar, Divider, Flex, Space } from 'antd';
import styles from './index.less';
type UserSpaceProps = {
@@ -14,7 +14,14 @@ function UserSpace({ users = [] }: UserSpaceProps) {
工作空间管理
- 
+
{users?.map((item, index) => {
return (
- 
+ icon={
+ })
+ }
+ >
);
})}
diff --git a/react-ui/src/pages/Workspace/index.less b/react-ui/src/pages/Workspace/index.less
index 1a454f38..f7f95a24 100644
--- a/react-ui/src/pages/Workspace/index.less
+++ b/react-ui/src/pages/Workspace/index.less
@@ -2,9 +2,10 @@
height: 100%;
padding: 20px 30px 10px;
overflow-y: auto;
- background-color: linear-gradient(#ecf2fe, #f9fafb);
+ background: linear-gradient(#ecf2fe, #f9fafb);
&__overview {
+ gap: 15px;
margin-bottom: 16px;
padding: 20px 30px;
background-color: white;
diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts
index 2a9d6413..fe9cd44d 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -25,21 +25,6 @@ export const requestConfig: RequestConfig = {
if (accessToken) {
headers['Authorization'] = `Bearer ${accessToken}`;
}
- // const expireTime = getTokenExpireTime();
- // if (expireTime) {
- // const left = Number(expireTime) - new Date().getTime();
- // const refreshToken = getRefreshToken();
- // if (left < 0 && refreshToken) {
- // clearSessionToken();
- // } else {
- // const accessToken = getAccessToken();
- // if (accessToken) {
- // headers['Authorization'] = `Bearer ${accessToken}`;
- // }
- // }
- // } else {
- // clearSessionToken();
- // }
}
return { url, options };
},
@@ -55,6 +40,8 @@ export const requestConfig: RequestConfig = {
clearSessionToken();
setRemoteMenu(null);
gotoLoginPage(false);
+ message.error('请重新登录');
+ return Promise.reject(response);
} else {
message.error(data?.msg ?? '请求失败');
return Promise.reject(response);
diff --git a/react-ui/src/styles/menu.less b/react-ui/src/styles/menu.less
new file mode 100644
index 00000000..29e3ed61
--- /dev/null
+++ b/react-ui/src/styles/menu.less
@@ -0,0 +1,59 @@
+.ant-menu-item,
+.ant-menu-submenu {
+ .kf-menu-item {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 16px;
+
+ .anticon.kf-menu-item__default-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: none !important;
+ margin-left: 0 !important;
+ }
+
+ &:hover {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+ }
+}
+
+.ant-menu-item.ant-menu-item-selected,
+.ant-menu-submenu.ant-menu-submenu-selected {
+ .kf-menu-item {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+}
+
+.ant-pro-base-menu-vertical-collapsed {
+ .kf-menu-item {
+ justify-content: center;
+
+ .kf-menu-item__name {
+ display: none !important;
+ }
+ }
+}
+
+.ant-menu-submenu {
+ .ant-menu-submenu-title:hover {
+ color: #1664ff !important;
+ }
+}
diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less
index c6514915..65a5a32e 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -36,16 +36,33 @@
@font-size: 15px;
@font-size-title: 18px;
@font-size-content: 16px;
+@font-size-input: 14px;
+@font-size-input-lg: 16px;
// 函数
.addAlpha(@color, @alpha) {
@red: red(@color);
@green: green(@color);
@blue: blue(@color);
-
@result: rgba(@red, @green, @blue, @alpha);
}
+// 混合
+.singleLine() {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: break-all;
+}
+
+.multiLine(@line) {
+ display: -webkit-box;
+ overflow: hidden;
+ word-break: break-all;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: @line;
+}
+
// 导出变量
:export {
primaryColor: @primary-color;
@@ -55,5 +72,9 @@
textColor: @text-color;
textColorSecondary: @text-color-secondary;
fontSize: @font-size;
+ fontSizeTitle: @font-size-title;
+ fontSizeContent: @font-size-content;
+ fontSizeInput: @font-size-input;
+ fontSizeInputLg: @font-size-input-lg;
siderBGColor: @sider-background-color;
}
diff --git a/react-ui/src/utils/menuRender.tsx b/react-ui/src/utils/menuRender.tsx
new file mode 100644
index 00000000..fc0b70dd
--- /dev/null
+++ b/react-ui/src/utils/menuRender.tsx
@@ -0,0 +1,31 @@
+import KFIcon from '@/components/KFIcon';
+import { MenuDataItem } from '@ant-design/pro-components';
+import { Link } from '@umijs/max';
+
+export const menuItemRender = (isSubMenu: boolean) => {
+ return (item: MenuDataItem) => {
+ const defaultIcon: string = item.icon as string;
+ const activeIcon = defaultIcon + '-active';
+ const hasParent = item.pro_layout_parentKeys?.length > 0;
+ const childen = (
+ <>
+ {!hasParent && defaultIcon && (
+ <>
+
{currentUser?.nickName}
{currentUser?.roleNames?.[0]?.roleName}
+ icon={
+
+ }
+ >
);
})}
diff --git a/react-ui/src/pages/Workspace/index.less b/react-ui/src/pages/Workspace/index.less
index 1a454f38..f7f95a24 100644
--- a/react-ui/src/pages/Workspace/index.less
+++ b/react-ui/src/pages/Workspace/index.less
@@ -2,9 +2,10 @@
height: 100%;
padding: 20px 30px 10px;
overflow-y: auto;
- background-color: linear-gradient(#ecf2fe, #f9fafb);
+ background: linear-gradient(#ecf2fe, #f9fafb);
&__overview {
+ gap: 15px;
margin-bottom: 16px;
padding: 20px 30px;
background-color: white;
diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts
index 2a9d6413..fe9cd44d 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -25,21 +25,6 @@ export const requestConfig: RequestConfig = {
if (accessToken) {
headers['Authorization'] = `Bearer ${accessToken}`;
}
- // const expireTime = getTokenExpireTime();
- // if (expireTime) {
- // const left = Number(expireTime) - new Date().getTime();
- // const refreshToken = getRefreshToken();
- // if (left < 0 && refreshToken) {
- // clearSessionToken();
- // } else {
- // const accessToken = getAccessToken();
- // if (accessToken) {
- // headers['Authorization'] = `Bearer ${accessToken}`;
- // }
- // }
- // } else {
- // clearSessionToken();
- // }
}
return { url, options };
},
@@ -55,6 +40,8 @@ export const requestConfig: RequestConfig = {
clearSessionToken();
setRemoteMenu(null);
gotoLoginPage(false);
+ message.error('请重新登录');
+ return Promise.reject(response);
} else {
message.error(data?.msg ?? '请求失败');
return Promise.reject(response);
diff --git a/react-ui/src/styles/menu.less b/react-ui/src/styles/menu.less
new file mode 100644
index 00000000..29e3ed61
--- /dev/null
+++ b/react-ui/src/styles/menu.less
@@ -0,0 +1,59 @@
+.ant-menu-item,
+.ant-menu-submenu {
+ .kf-menu-item {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 16px;
+
+ .anticon.kf-menu-item__default-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: none !important;
+ margin-left: 0 !important;
+ }
+
+ &:hover {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+ }
+}
+
+.ant-menu-item.ant-menu-item-selected,
+.ant-menu-submenu.ant-menu-submenu-selected {
+ .kf-menu-item {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+}
+
+.ant-pro-base-menu-vertical-collapsed {
+ .kf-menu-item {
+ justify-content: center;
+
+ .kf-menu-item__name {
+ display: none !important;
+ }
+ }
+}
+
+.ant-menu-submenu {
+ .ant-menu-submenu-title:hover {
+ color: #1664ff !important;
+ }
+}
diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less
index c6514915..65a5a32e 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -36,16 +36,33 @@
@font-size: 15px;
@font-size-title: 18px;
@font-size-content: 16px;
+@font-size-input: 14px;
+@font-size-input-lg: 16px;
// 函数
.addAlpha(@color, @alpha) {
@red: red(@color);
@green: green(@color);
@blue: blue(@color);
-
@result: rgba(@red, @green, @blue, @alpha);
}
+// 混合
+.singleLine() {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: break-all;
+}
+
+.multiLine(@line) {
+ display: -webkit-box;
+ overflow: hidden;
+ word-break: break-all;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: @line;
+}
+
// 导出变量
:export {
primaryColor: @primary-color;
@@ -55,5 +72,9 @@
textColor: @text-color;
textColorSecondary: @text-color-secondary;
fontSize: @font-size;
+ fontSizeTitle: @font-size-title;
+ fontSizeContent: @font-size-content;
+ fontSizeInput: @font-size-input;
+ fontSizeInputLg: @font-size-input-lg;
siderBGColor: @sider-background-color;
}
diff --git a/react-ui/src/utils/menuRender.tsx b/react-ui/src/utils/menuRender.tsx
new file mode 100644
index 00000000..fc0b70dd
--- /dev/null
+++ b/react-ui/src/utils/menuRender.tsx
@@ -0,0 +1,31 @@
+import KFIcon from '@/components/KFIcon';
+import { MenuDataItem } from '@ant-design/pro-components';
+import { Link } from '@umijs/max';
+
+export const menuItemRender = (isSubMenu: boolean) => {
+ return (item: MenuDataItem) => {
+ const defaultIcon: string = item.icon as string;
+ const activeIcon = defaultIcon + '-active';
+ const hasParent = item.pro_layout_parentKeys?.length > 0;
+ const childen = (
+ <>
+ {!hasParent && defaultIcon && (
+ <>
+ {childen}
;
+ } else {
+ return (
+
+ {childen}
+
+ );
+ }
+ };
+};
diff --git a/react-ui/src/utils/ui.tsx b/react-ui/src/utils/ui.tsx
index 108bc8c0..8f8bde3f 100644
--- a/react-ui/src/utils/ui.tsx
+++ b/react-ui/src/utils/ui.tsx
@@ -6,7 +6,7 @@
import { PageEnum } from '@/enums/pagesEnums';
import themes from '@/styles/theme.less';
import { history } from '@umijs/max';
-import { Modal, type ModalFuncProps, type UploadFile } from 'antd';
+import { Modal, message, type ModalFuncProps, type UploadFile } from 'antd';
// 自定义 Confirm 弹框
export function modalConfirm({ title, content, onOk, ...rest }: ModalFuncProps) {
@@ -54,6 +54,7 @@ export const gotoLoginPage = (toHome: boolean = true) => {
const urlParams = new URLSearchParams();
urlParams.append('redirect', pathname + search);
const newSearch = toHome && pathname && pathname !== PageEnum.LOGIN ? '' : urlParams.toString();
+ console.log('gotoLoginPage', pathname, search);
if (window.location.pathname !== PageEnum.LOGIN) {
history.replace({
pathname: PageEnum.LOGIN,
@@ -61,3 +62,28 @@ export const gotoLoginPage = (toHome: boolean = true) => {
});
}
};
+
+// 上传文件校验
+export const validateUploadFiles = (files: UploadFile[], required: boolean = true): boolean => {
+ if (required && files.length === 0) {
+ message.error('请上传文件');
+ return false;
+ }
+
+ const hasError = files.some((file) => {
+ if (file.status === 'uploading') {
+ message.error('请等待文件上传完成');
+ return true;
+ }
+ if (file.status === 'error') {
+ message.error('存在上传失败的文件，请删除后重新上传文件');
+ return true;
+ }
+ if (!file.response || file.response.code !== 200 || !file.response.data) {
+ message.error('存在上传失败的文件，请删除后重新上传文件');
+ return true;
+ }
+ return false;
+ });
+ return !hasError;
+};