From e436f28c6a0fa33ff2375d6fa1f5817dcc939c38 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Mon, 13 May 2024 10:22:38 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E9=9B=86=E5=92=8C=E6=A8=A1=E5=9E=8B=E6=96=B0=E5=BB=BA?= =?UTF-8?q?=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/config/routes.ts | 4 +- .../src/components/RightContent/index.tsx | 1 + .../components/AddDatasetModal/index.less | 2 +- .../components/AddDatasetModal/index.tsx | 16 +- .../components/AddModelModal/index.tsx | 18 +- .../components/AddVersionModal/index.tsx | 169 ++++++++++++++++ .../Dataset/components/ResourceList/index.tsx | 2 +- .../Dataset/{datasetIntro.jsx => intro.jsx} | 190 +++--------------- .../pages/Dataset/{index.less => intro.less} | 0 react-ui/src/pages/Dataset/type.tsx | 18 +- .../Model/components/AddModelModal/index.less | 4 - .../pages/Model/{modelIntro.jsx => intro.jsx} | 165 ++------------- .../pages/Model/{index.less => intro.less} | 0 13 files changed, 252 insertions(+), 337 deletions(-) rename react-ui/src/pages/{Model => Dataset}/components/AddModelModal/index.tsx (93%) create mode 100644 react-ui/src/pages/Dataset/components/AddVersionModal/index.tsx rename react-ui/src/pages/Dataset/{datasetIntro.jsx => intro.jsx} (64%) rename react-ui/src/pages/Dataset/{index.less => intro.less} (100%) delete mode 100644 react-ui/src/pages/Model/components/AddModelModal/index.less rename react-ui/src/pages/Model/{modelIntro.jsx => intro.jsx} (64%) rename react-ui/src/pages/Model/{index.less => intro.less} (100%) diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts index cd81e412..855ad15c 100644 --- a/react-ui/config/routes.ts +++ b/react-ui/config/routes.ts @@ -131,7 +131,7 @@ export default [ { name: '数据集简介', path: ':id', - component: './Dataset/datasetIntro', + component: './Dataset/intro', }, ], }, @@ -147,7 +147,7 @@ export default [ { name: '模型简介', path: ':id', - component: './Model/modelIntro', + component: './Model/intro', }, ], }, diff --git a/react-ui/src/components/RightContent/index.tsx b/react-ui/src/components/RightContent/index.tsx index 70e57e23..75d86186 100644 --- a/react-ui/src/components/RightContent/index.tsx +++ b/react-ui/src/components/RightContent/index.tsx @@ -2,6 +2,7 @@ import { useEmotionCss } from '@ant-design/use-emotion-css'; import { useModel } from '@umijs/max'; import React from 'react'; import Avatar from './AvatarDropdown'; +// import { SelectLang } from '@umijs/max'; export type SiderTheme = 'light' | 'dark'; diff --git a/react-ui/src/pages/Dataset/components/AddDatasetModal/index.less b/react-ui/src/pages/Dataset/components/AddDatasetModal/index.less index 529521af..66022fdd 100644 --- a/react-ui/src/pages/Dataset/components/AddDatasetModal/index.less +++ b/react-ui/src/pages/Dataset/components/AddDatasetModal/index.less @@ -4,6 +4,6 @@ } .upload-button { - height: 48px; + height: 46px; font-size: 15px; } diff --git a/react-ui/src/pages/Dataset/components/AddDatasetModal/index.tsx b/react-ui/src/pages/Dataset/components/AddDatasetModal/index.tsx index c83d5143..dbb8fc84 100644 --- a/react-ui/src/pages/Dataset/components/AddDatasetModal/index.tsx +++ b/react-ui/src/pages/Dataset/components/AddDatasetModal/index.tsx @@ -23,7 +23,7 @@ import { useEffect, useState } from 'react'; import { CategoryData } from '../../type'; import styles from './index.less'; -interface AddDatasetModalProps extends ModalProps { +interface AddDatasetModalProps extends Omit { typeList: CategoryData[]; tagList: CategoryData[]; onOk: () => void; @@ -94,15 +94,7 @@ function AddDatasetModal({ typeList, tagList, onOk, ...rest }: AddDatasetModalPr }} destroyOnClose > -
+ @@ -142,6 +136,8 @@ function AddDatasetModal({ typeList, tagList, onOk, ...rest }: AddDatasetModalPr placeholder="请选择研究方向/应用领域" options={tagList} fieldNames={{ label: 'name', value: 'id' }} + optionFilterProp="name" + showSearch /> diff --git a/react-ui/src/pages/Model/components/AddModelModal/index.tsx b/react-ui/src/pages/Dataset/components/AddModelModal/index.tsx similarity index 93% rename from react-ui/src/pages/Model/components/AddModelModal/index.tsx rename to react-ui/src/pages/Dataset/components/AddModelModal/index.tsx index e04b1ba1..21e76faa 100644 --- a/react-ui/src/pages/Model/components/AddModelModal/index.tsx +++ b/react-ui/src/pages/Dataset/components/AddModelModal/index.tsx @@ -18,9 +18,9 @@ import { } from 'antd'; import { omit } from 'lodash'; import { useState } from 'react'; -import styles from './index.less'; +import styles from '../AddDatasetModal/index.less'; -interface AddModelModalProps extends ModalProps { +interface AddModelModalProps extends Omit { typeList: CategoryData[]; tagList: CategoryData[]; onOk: () => void; @@ -76,15 +76,7 @@ function AddModelModal({ typeList, tagList, onOk, ...rest }: AddModelModalProps) form: 'form', }} > - + @@ -148,6 +142,8 @@ function AddModelModal({ typeList, tagList, onOk, ...rest }: AddModelModalProps) placeholder="请选择模型标签" options={tagList} fieldNames={{ label: 'name', value: 'id' }} + optionFilterProp="name" + showSearch /> { + resourceType: ResourceType; + resourceId: number; + initialName: string; + onOk: () => void; +} + +function AddVersionModal({ + resourceType, + resourceId, + initialName, + onOk, + ...rest +}: AddVersionModalProps) { + const [uuid] = useState(Date.now()); + + // 上传组件参数 + const uploadProps: UploadProps = { + action: resourceConfig[resourceType].uploadAction, + headers: { + Authorization: getAccessToken() || '', + }, + defaultFileList: [], + }; + + // 上传请求 + const createDatasetVersion = async (params: any) => { + const request = resourceConfig[resourceType].addVersionReq; + const [res] = await to(request(params)); + if (res) { + message.success('创建成功'); + onOk?.(); + } + }; + + // 提交 + const onFinish = (formData: any) => { + const fileList: UploadFile[] = formData['fileList'] ?? []; + if (validateUploadFiles(fileList)) { + const otherParams = omit(formData, ['fileList']); + const params = fileList.map((item) => { + const data = item.response?.data?.[0] ?? {}; + return { + ...otherParams, + [resourceConfig[resourceType].idParamKey]: resourceId, + file_name: data.fileName, + file_size: data.fileSize, + url: data.url, + }; + }); + createDatasetVersion(params); + } + }; + + const name = resourceConfig[resourceType].name; + const accept = resourceConfig[resourceType].uploadAccept; + return ( + + + + + + + + + + + + + + + {resourceType === ResourceType.Dataset && ( +
只允许上传.zip格式文件
+ )} + + + + + ); +} + +export default AddVersionModal; diff --git a/react-ui/src/pages/Dataset/components/ResourceList/index.tsx b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx index b07cb5bf..59ff87f6 100644 --- a/react-ui/src/pages/Dataset/components/ResourceList/index.tsx +++ b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx @@ -1,6 +1,6 @@ import KFIcon from '@/components/KFIcon'; import { CommonTabKeys } from '@/enums'; -import AddModelModal from '@/pages/Model/components/AddModelModal'; +import AddModelModal from '@/pages/Dataset/components/AddModelModal'; import { openAntdModal } from '@/utils/modal'; import { to } from '@/utils/promise'; import { modalConfirm } from '@/utils/ui'; diff --git a/react-ui/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/intro.jsx similarity index 64% rename from react-ui/src/pages/Dataset/datasetIntro.jsx rename to react-ui/src/pages/Dataset/intro.jsx index 16128aeb..66f08b9c 100644 --- a/react-ui/src/pages/Dataset/datasetIntro.jsx +++ b/react-ui/src/pages/Dataset/intro.jsx @@ -1,56 +1,25 @@ -import { getAccessToken } from '@/access'; import KFIcon from '@/components/KFIcon'; -import KFModal from '@/components/KFModal'; +import { ResourceType } from '@/pages/Dataset/type'; import { - addDatasetVersionDetail, deleteDatasetVersion, getDatasetById, getDatasetVersionIdList, getDatasetVersionsById, } from '@/services/dataset/index.js'; import { downLoadZip } from '@/utils/downloadfile'; +import { openAntdModal } from '@/utils/modal'; import { modalConfirm } from '@/utils/ui'; -import { UploadOutlined } from '@ant-design/icons'; import { useParams, useSearchParams } from '@umijs/max'; -import { Button, Form, Input, Select, Table, Tabs, Upload, message } from 'antd'; +import { Button, Input, Select, Table, Tabs, message } from 'antd'; import moment from 'moment'; import { useEffect, useRef, useState } from 'react'; -import Styles from './index.less'; +import AddVersionModal from './components/AddVersionModal'; +import Styles from './intro.less'; const { Search } = Input; const { TabPane } = Tabs; const Dataset = () => { - const props = { - action: '/api/mmp/dataset/upload', - // headers: { - // 'X-Requested-With': null - // }, - headers: { - Authorization: getAccessToken(), - 'X-Requested-With': null, - }, - onChange({ file, fileList }) { - if (file.status !== 'uploading') { - console.log(file, fileList); - setFormList( - fileList.map((item) => { - return { - ...form.getFieldsValue(), - dataset_id: locationParams.id, - file_name: item.response.code === 200 ? item.response.data[0].fileName : null, - file_size: item.response.code === 200 ? item.response.data[0].fileSize : null, - url: item.response.code === 200 ? item.response.data[0].url : null, - }; - }), - ); - } - }, - defaultFileList: [], - }; - const [form] = Form.useForm(); const [formList, setFormList] = useState([]); - const [dialogTitle, setDialogTitle] = useState('新建版本'); - const [isModalOpen, setIsModalOpen] = useState(false); const [datasetDetailObj, setDatasetDetailObj] = useState({}); const [version, setVersion] = useState(null); const [versionList, setVersionList] = useState([]); @@ -58,8 +27,8 @@ const Dataset = () => { 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); @@ -93,21 +62,17 @@ const Dataset = () => { return () => {}; }, []); const showModal = () => { - form.resetFields(); - form.setFieldsValue({ name: datasetDetailObj.name }); - - setDialogTitle('创建新版本'); - setUuid(Date.now()); - setIsModalOpen(true); - }; - const handleCancel = () => { - setIsModalOpen(false); - }; - const handleExport = async () => { - const hide = message.loading('正在下载'); - hide(); - downLoadZip(`/api/mmp/dataset/downloadAllFiles`, { dataset_id: locationParams.id, version }); + const { close } = openAntdModal(AddVersionModal, { + resourceType: ResourceType.Dataset, + resourceId: locationParams.id, + initialName: datasetDetailObj.name, + onOk: () => { + getDatasetVersionList(); + close(); + }, + }); }; + const deleteDataset = () => { modalConfirm({ title: '删除后，该数据集版本将不可恢复', @@ -120,19 +85,26 @@ const Dataset = () => { }, }); }; - const onFinish = (values) => { - addDatasetVersionDetail(formList).then((ret) => { - getDatasetVersionList(); - setIsModalOpen(false); - message.success('创建成功'); - }); - }; // 获取版本下的文件列表 const getDatasetVersions = (params) => { getDatasetVersionIdList(params).then((res) => { setWordList(res?.data?.content ?? []); }); }; + + const handleExport = async () => { + const hide = message.loading('正在下载'); + hide(); + downLoadZip(`/api/mmp/dataset/downloadAllFiles`, { dataset_id: locationParams.id, version }); + }; + + const downloadAlone = (e, record) => { + console.log(record); + const hide = message.loading('正在下载'); + hide(); + downLoadZip(`/api/mmp/dataset/download/${record.id}`); + }; + const handleChange = (value) => { console.log(value); if (value) { @@ -142,15 +114,7 @@ const Dataset = () => { setVersion(null); } }; - const onFinishFailed = (errorInfo) => { - console.log('Failed:', errorInfo); - }; - const downloadAlone = (e, record) => { - console.log(record); - const hide = message.loading('正在下载'); - hide(); - downLoadZip(`/api/mmp/dataset/download/${record.id}`); - }; + const columns = [ { title: '序号', @@ -292,98 +256,6 @@ const Dataset = () => { - -
- - - - - - - - - - - - -
只允许上传.zip,.tgz格式文件
- - -
- ); }; diff --git a/react-ui/src/pages/Dataset/index.less b/react-ui/src/pages/Dataset/intro.less similarity index 100% rename from react-ui/src/pages/Dataset/index.less rename to react-ui/src/pages/Dataset/intro.less diff --git a/react-ui/src/pages/Dataset/type.tsx b/react-ui/src/pages/Dataset/type.tsx index 91808ea2..3bc7f2fe 100644 --- a/react-ui/src/pages/Dataset/type.tsx +++ b/react-ui/src/pages/Dataset/type.tsx @@ -1,6 +1,8 @@ import KFIcon from '@/components/KFIcon'; import { CommonTabKeys } from '@/enums'; import { + addDatasetVersionDetail, + addModelsVersionDetail, deleteDataset, deleteModel, getDatasetList, @@ -18,9 +20,9 @@ export enum ResourceType { } type ResourceTypeKeys = keyof typeof ResourceType; -type ResourceTypeValues = (typeof ResourceType)[ResourceTypeKeys]; +export type ResourceTypeValues = (typeof ResourceType)[ResourceTypeKeys]; -export type ResourceTypeInfo = { +type ResourceTypeInfo = { getList: (params: any) => Promise; getVersions: (params: any) => Promise; getFiles: (params: any) => Promise; @@ -37,6 +39,10 @@ export type ResourceTypeInfo = { iconPathPrefix: string; // 图标路径前缀 deleteModalTitle: string; // 删除弹框的title addBtnTitle: string; // 新增按钮的title + addVersionReq: (params: any) => Promise; + idParamKey: string; + uploadAction: string; + uploadAccept?: string; }; export const resourceConfig: Record = { @@ -68,6 +74,10 @@ export const resourceConfig: Record = { iconPathPrefix: 'dataset', deleteModalTitle: '确定删除该条数据集实例吗？', addBtnTitle: '新建数据集', + addVersionReq: addDatasetVersionDetail, + idParamKey: 'dataset_id', + uploadAction: '/api/mmp/dataset/upload', + uploadAccept: '.zip,.tgz', }, [ResourceType.Model]: { getList: getModelList, @@ -97,6 +107,10 @@ export const resourceConfig: Record = { iconPathPrefix: 'model', deleteModalTitle: '确定删除该条模型实例吗？', addBtnTitle: '新建模型', + addVersionReq: addModelsVersionDetail, + idParamKey: 'models_id', + uploadAction: '/api/mmp/models/upload', + uploadAccept: undefined, }, }; diff --git a/react-ui/src/pages/Model/components/AddModelModal/index.less b/react-ui/src/pages/Model/components/AddModelModal/index.less deleted file mode 100644 index bb520221..00000000 --- a/react-ui/src/pages/Model/components/AddModelModal/index.less +++ /dev/null @@ -1,4 +0,0 @@ -.upload-button { - height: 48px; - font-size: 15px; -} diff --git a/react-ui/src/pages/Model/modelIntro.jsx b/react-ui/src/pages/Model/intro.jsx similarity index 64% rename from react-ui/src/pages/Model/modelIntro.jsx rename to react-ui/src/pages/Model/intro.jsx index d978f15e..22efc474 100644 --- a/react-ui/src/pages/Model/modelIntro.jsx +++ b/react-ui/src/pages/Model/intro.jsx @@ -1,65 +1,33 @@ -import { getAccessToken } from '@/access'; import KFIcon from '@/components/KFIcon'; -import KFModal from '@/components/KFModal'; +import AddVersionModal from '@/pages/Dataset/components/AddVersionModal'; +import { ResourceType } from '@/pages/Dataset/type'; import { - addModelsVersionDetail, deleteModelVersion, getModelById, getModelVersionIdList, getModelVersionsById, } from '@/services/dataset/index.js'; import { downLoadZip } from '@/utils/downloadfile'; +import { openAntdModal } from '@/utils/modal'; import { modalConfirm } from '@/utils/ui'; -import { UploadOutlined } from '@ant-design/icons'; import { useParams, useSearchParams } from '@umijs/max'; -import { Button, Form, Input, Select, Table, Tabs, Upload, message } from 'antd'; +import { Button, Input, Select, Table, Tabs, message } from 'antd'; import moment from 'moment'; import { useEffect, useRef, useState } from 'react'; -import Styles from './index.less'; +import Styles from './intro.less'; const { Search } = Input; const { TabPane } = Tabs; const Dataset = () => { - const props = { - action: '/api/mmp/models/upload', - // headers: { - // 'X-Requested-With': null - // }, - headers: { - Authorization: getAccessToken(), - 'X-Requested-With': null, - }, - onChange({ file, fileList }) { - if (file.status !== 'uploading') { - console.log(file, fileList); - setFormList( - fileList.map((item) => { - return { - ...form.getFieldsValue(), - models_id: locationParams.id, - file_name: item.response.code === 200 ? item.response.data[0].fileName : null, - file_size: item.response.code === 200 ? item.response.data[0].fileSize : null, - url: item.response.code === 200 ? item.response.data[0].url : null, - }; - }), - ); - } - }, - defaultFileList: [], - }; - const [form] = Form.useForm(); const [formList, setFormList] = useState([]); - const [dialogTitle, setDialogTitle] = useState('新建版本'); - const [isModalOpen, setIsModalOpen] = useState(false); const [datasetDetailObj, setDatasetDetailObj] = useState({}); const [version, setVersion] = useState(null); const [versionList, setVersionList] = useState([]); const locationParams = useParams(); //新版本获取路由参数接口 const [searchParams] = useSearchParams(); - console.log(locationParams); const [wordList, setWordList] = useState([]); - const [uuid, setUuid] = useState(Date.now()); const isPublic = searchParams.get('isPublic') === 'true'; + const getModelByDetail = () => { getModelById(locationParams.id).then((ret) => { console.log(ret); @@ -92,16 +60,17 @@ const Dataset = () => { return () => {}; }, []); const showModal = () => { - form.resetFields(); - form.setFieldsValue({ name: datasetDetailObj.name }); - - setDialogTitle('创建新版本'); - setUuid(Date.now()); - setIsModalOpen(true); - }; - const handleCancel = () => { - setIsModalOpen(false); + const { close } = openAntdModal(AddVersionModal, { + resourceType: ResourceType.Model, + resourceId: locationParams.id, + initialName: datasetDetailObj.name, + onOk: () => { + getModelVersionsList(); + close(); + }, + }); }; + const deleteDataset = () => { modalConfirm({ title: '删除后，该版本将不可恢复', @@ -117,13 +86,7 @@ const Dataset = () => { }, }); }; - const onFinish = () => { - addModelsVersionDetail(formList).then((ret) => { - getModelVersionsList(); - setIsModalOpen(false); - message.success('创建成功'); - }); - }; + const getModelVersions = (params) => { getModelVersionIdList(params).then((ret) => { setWordList(ret?.data?.content ?? []); @@ -149,9 +112,7 @@ const Dataset = () => { setVersion(''); } }; - const onFinishFailed = (errorInfo) => { - console.log('Failed:', errorInfo); - }; + const columns = [ { title: '序号', @@ -294,96 +255,6 @@ const Dataset = () => { - -
- - - - - - - - - - - - - - -
- ); }; diff --git a/react-ui/src/pages/Model/index.less b/react-ui/src/pages/Model/intro.less similarity index 100% rename from react-ui/src/pages/Model/index.less rename to react-ui/src/pages/Model/intro.less