From 16804b6985ebc8384e17abdf8334a99239bc3312 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Sun, 7 Apr 2024 14:01:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E9=9B=86=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=92=8C=E6=A8=A1=E5=9E=8B=E7=AE=A1=E7=90=86=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E7=89=88=E6=9C=AC=E6=8F=8F=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/config/defaultSettings.ts | 4 +- react-ui/src/pages/Dataset/datasetIntro.jsx | 476 ++++++++++------- react-ui/src/pages/Dataset/index.less | 548 ++++++++++---------- react-ui/src/pages/Model/index.jsx | 96 ++-- react-ui/src/pages/Model/index.less | 541 ++++++++++--------- react-ui/src/pages/Model/modelIntro.jsx | 127 +++-- react-ui/src/pages/Pipeline/index.jsx | 516 +++++++++--------- react-ui/src/requestConfig.ts | 3 +- react-ui/src/styles/theme.less | 8 + 9 files changed, 1236 insertions(+), 1083 deletions(-) create mode 100644 react-ui/src/styles/theme.less diff --git a/react-ui/config/defaultSettings.ts b/react-ui/config/defaultSettings.ts index 91930d6e..b4430310 100644 --- a/react-ui/config/defaultSettings.ts +++ b/react-ui/config/defaultSettings.ts @@ -9,7 +9,7 @@ const Settings: ProLayoutProps & { } = { navTheme: 'light', // 拂晓蓝 - colorPrimary: '#1890ff', + colorPrimary: '#1664ff', layout: 'mix', contentWidth: 'Fluid', fixedHeader: false, @@ -19,7 +19,7 @@ const Settings: ProLayoutProps & { title: '复杂智能软件', pwa: true, logo: '/assets/images/left-top-logo.png', - iconfontUrl: '', + iconfontUrl: '', token: { // 参见ts声明，demo 见文档，通过token 修改样式 //https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F diff --git a/react-ui/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/datasetIntro.jsx index 05b01e31..e3cf7baf 100644 --- a/react-ui/src/pages/Dataset/datasetIntro.jsx +++ b/react-ui/src/pages/Dataset/datasetIntro.jsx @@ -1,88 +1,95 @@ - -import React ,{useEffect,useState,useRef}from 'react'; -import Styles from './index.less' -import { Input, Space ,Button,Tabs,Pagination,Modal, Form,message, Radio,Select,Table,Upload} from 'antd'; -import { PlusOutlined,PlusCircleOutlined, DeleteOutlined,UploadOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined ,CopyOutlined} from '@ant-design/icons'; -import {getDatasetList,getDatasetById,getDatasetVersionsById,getDatasetVersionIdList,deleteDatasetVersion,addDatasetVersionDetail,exportDataset} from '@/services/dataset/index.js' -import { useParams } from 'react-router-dom' -import {downLoadZip} from '@/utils/downloadfile' -const { Search } = Input; +import { getAccessToken } from '@/access'; +import { + addDatasetVersionDetail, + deleteDatasetVersion, + getDatasetById, + getDatasetVersionIdList, + getDatasetVersionsById, +} from '@/services/dataset/index.js'; +import { downLoadZip } from '@/utils/downloadfile'; +import { + DeleteOutlined, + DownloadOutlined, + PlusCircleOutlined, + UploadOutlined, +} from '@ant-design/icons'; +import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, message } from 'antd'; import moment from 'moment'; -import { getAccessToken } from '@/access'; +import { useEffect, useRef, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import Styles from './index.less'; +const { Search } = Input; const { TabPane } = Tabs; -const Dataset= React.FC = () => { +const Dataset = () => { const props = { action: '/api/mmp/dataset/upload', // headers: { // 'X-Requested-With': null // }, headers: { - Authorization:getAccessToken(), - 'X-Requested-With': null - + 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.data[0].fileName, - file_size:item.response.data[0].fileSize, - url:item.response.data[0].url, - } - })) + setFormList( + fileList.map((item) => { + return { + ...form.getFieldsValue(), + dataset_id: locationParams.id, + file_name: item.response.data[0].fileName, + file_size: item.response.data[0].fileSize, + url: item.response.data[0].url, + }; + }), + ); } }, - defaultFileList: [ - ], + defaultFileList: [], }; const [form] = Form.useForm(); - const [formList,setFormList]=useState([]) + const [formList, setFormList] = useState([]); const [dialogTitle, setDialogTitle] = useState('新建版本'); - const [isModalOpen,setIsModalOpen]=useState(false) - const [datasetDetailObj,setDatasetDetailObj]=useState({ - }); - const [version,setVersion]=useState('') + const [isModalOpen, setIsModalOpen] = useState(false); + const [datasetDetailObj, setDatasetDetailObj] = useState({}); + const [version, setVersion] = useState(''); const [versionList, setVersionList] = useState([]); - const locationParams =useParams () //新版本获取路由参数接口 - console.log(locationParams); + const locationParams = useParams(); //新版本获取路由参数接口 const [wordList, setWordList] = useState([]); - const getDatasetByDetail=()=>{ - getDatasetById(locationParams.id).then(ret=>{ + const [activeTabKey, setActiveTabKey] = useState('1'); + const getDatasetByDetail = () => { + getDatasetById(locationParams.id).then((ret) => { console.log(ret); - if(ret.code==200){ - setDatasetDetailObj(ret.data) - } - }) - } - const getDatasetVersionList=()=>{ - getDatasetVersionsById(locationParams.id).then(ret=>{ + setDatasetDetailObj(ret.data); + }); + }; + const getDatasetVersionList = () => { + getDatasetVersionsById(locationParams.id).then((ret) => { console.log(ret); - if(ret.code==200&&ret.data&&ret.data.length>0){ - setVersionList(ret.data.map(item=>{ - return { - 'label':item, - 'value':item - } - })) + if (ret.data && ret.data.length > 0) { + setVersionList( + ret.data.map((item) => { + return { + label: item, + value: item, + }; + }), + ); } - }) - } - useEffect(()=>{ - getDatasetByDetail() - getDatasetVersionList() - return ()=>{ - - } - },[]) + }); + }; + useEffect(() => { + getDatasetByDetail(); + getDatasetVersionList(); + return () => {}; + }, []); const showModal = () => { - form.resetFields() - form.setFieldsValue({name:datasetDetailObj.name}) - - setDialogTitle('创建新版本') + form.resetFields(); + form.setFieldsValue({ name: datasetDetailObj.name }); + + setDialogTitle('创建新版本'); setIsModalOpen(true); }; const handleCancel = () => { @@ -91,80 +98,74 @@ const Dataset= React.FC = () => { const handleExport = async () => { const hide = message.loading('正在下载'); hide(); - downLoadZip(`/api/mmp/dataset/downloadAllFiles`,{dataset_id:locationParams.id,version}) + downLoadZip(`/api/mmp/dataset/downloadAllFiles`, { dataset_id: locationParams.id, version }); }; - const deleteDataset=()=>{ + const deleteDataset = () => { Modal.confirm({ title: '删除', content: '确定删除数据集版本？', okText: '确认', cancelText: '取消', - onOk: () => { - deleteDatasetVersion({dataset_id:locationParams.id,version}).then(ret=>{ - if(ret.code==200){ - message.success('删除成功') - getDatasetVersions({version,dataset_id:locationParams.id}) - } - else{ - message.error(ret.msg) - } + onOk: () => { + deleteDatasetVersion({ dataset_id: locationParams.id, version }).then((ret) => { + message.success('删除成功'); + getDatasetVersions({ version, dataset_id: locationParams.id }); }); }, }); - } - const onFinish = (values) => { - addDatasetVersionDetail(formList).then(ret=>{ - console.log(ret); - getDatasetVersionList() - setIsModalOpen(false); - }) - }; - const getDatasetVersions=(params)=>{ - getDatasetVersionIdList(params).then(ret=>{ + }; + const onFinish = (values) => { + addDatasetVersionDetail(formList).then((ret) => { console.log(ret); - if(ret.code==200){ - setWordList(ret.data) - } - }) - } - const handleChange=(value)=>{ + getDatasetVersionList(); + setIsModalOpen(false); + }); + }; + const getDatasetVersions = (params) => { + getDatasetVersionIdList(params).then((res) => { + setWordList( + res.data.map((v) => ({ + ...v, + key: v.id, + })), + ); + }); + }; + const handleChange = (value) => { console.log(value); - if(value){ - getDatasetVersions({version:value,dataset_id:locationParams.id}) - setVersion(value) - } - else{ - setVersion(null) + if (value) { + getDatasetVersions({ version: value, dataset_id: locationParams.id }); + setVersion(value); + } else { + setVersion(null); } - } + }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; - const downloadAlone=(e,record)=>{ + const downloadAlone = (e, record) => { console.log(record); const hide = message.loading('正在下载'); hide(); - downLoadZip(`/api/mmp//dataset/download/${record.id}`) - } + downLoadZip(`/api/mmp/dataset/download/${record.id}`); + }; const columns = [ - // { - // title: '序号', - // dataIndex: 'index', - // key: 'index', - // width: 80, - // render(text, record, index) { - // return ( - // {(pageOption.current.page - 1) * 10 + index + 1} - // ) - // } - // // render: (text, record, index) => `${((curPage-1)*10)+(index+1)}`, - // }, + { + title: '序号', + dataIndex: 'index', + key: 'index', + width: 80, + render(text, record, index) { + return {(pageOption.current.page - 1) * 10 + index + 1}; + }, + // render: (text, record, index) => `${((curPage-1)*10)+(index+1)}`, + }, { title: '文件名称', dataIndex: 'file_name', key: 'file_name', - render: (text,record) => downloadAlone(e,record)}>{text}, + render: (text, record) => downloadAlone(e, record)}>{text}, }, { title: '版本号', @@ -182,80 +183,128 @@ const Dataset= React.FC = () => { key: 'update_time', render: (text) => {moment(text).format('YYYY-MM-DD HH:mm:ss')}, }, + { + title: '操作', + dataIndex: 'option', + width: '100px', + key: 'option', + render: (_, record) => [ + , + ], + }, ]; - const pageOption = useRef({page: 1,size: 10}) + const pageOption = useRef({ page: 1, size: 10 }); // 当前页面切换 const paginationChange = async (current, size) => { - console.log('page', current, size) - pageOption.current={ - page:current, - size:size - } + console.log('page', current, size); + pageOption.current = { + page: current, + size: size, + }; // getList() - } - return (
-
- {datasetDetailObj.name} -
-
{datasetDetailObj.data_tag||'...'}
+ }; + return ( +
+
+ {datasetDetailObj.name} +
+
{datasetDetailObj.data_tag || '...'}
{datasetDetailObj.data_type}
{/*
English
*/} -
-
-
- - -
简介
-
{datasetDetailObj.description}
- - -
-
数据集文件列表
-
-
- 版本号： - + +
+
+ + +
+
+
+ {wordList.length > 0 ? wordList[0].description : null} +
+ + + + + + + + {dialogTitle} + + } + open={isModalOpen} + className={Styles.modal} + okButtonProps={{ + htmlType: 'submit', + form: 'form', + }} + onCancel={handleCancel} + >
{ label="数据集名称" name="name" rules={[ - // { - // required: true, - // message: 'Please input your username!', - // }, + { + required: true, + message: '请输入数据集名称', + }, ]} > - + - - + + + + + + + + + - - - - - - - ) + + ); }; -export default Dataset; \ No newline at end of file +export default Dataset; diff --git a/react-ui/src/pages/Dataset/index.less b/react-ui/src/pages/Dataset/index.less index a3994d1d..320ca827 100644 --- a/react-ui/src/pages/Dataset/index.less +++ b/react-ui/src/pages/Dataset/index.less @@ -1,303 +1,297 @@ -.datasetTopBox{ +.datasetTopBox { + display: flex; + align-items: center; + width: 100%; + height: 49px; + padding: 0 30px; + padding-right: 30px; + background-image: url(/assets/images/pipeline-back.png); + background-size: 100% 100%; +} +.datasetIntroTopBox { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + height: 110px; + margin-bottom: 10px; + padding: 25px 30px; + background-image: url(/assets/images/dataset-back.png); + background-size: 100% 100%; + .smallTagBox { display: flex; align-items: center; - padding-right: 30px; - width: 100%; - height: 49px; - background-size: 100% 100%; - background-image: url(/assets/images/pipeline-back.png); - padding: 0 30px; + color: #1664ff; + font-size: 14px; + .tagItem { + margin-right: 20px; + padding: 4px 10px; + background: rgba(22, 100, 255, 0.1); + border-radius: 4px; + } + } } -.datasetIntroTopBox{ +.dataListBox { + padding: 20px 30px; + color: #1d1d20; + font-size: 16px; + background: #ffffff; + border-radius: 10px; + box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); + .dataButtonList { display: flex; - flex-direction: column; + align-items: center; justify-content: space-between; - width: 100%; - height: 110px; - background-size: 100% 100%; - background-image: url(/assets/images/dataset-back.png); - margin-bottom: 10px; - padding: 25px 30px; - .smallTagBox{ - display: flex; - align-items: center; - color:#1664ff; - font-size:14px; - .tagItem{ - padding: 4px 10px; - background: rgba(22, 100, 255, 0.1); - border-radius:4px; - margin-right: 20px; - } - } -} -.dataListBox{ - padding: 20px 30px; - background:#ffffff; - border-radius:10px; - box-shadow:0px 2px 12px rgba(180, 182, 191, 0.09); - color:#1d1d20; - font-size:16px; - .dataButtonList{ - display: flex; - justify-content: space-between; - align-items: center; - height: 32px; - margin: 24px 0 30px 0; - color:#575757; - font-size:16px; - } + height: 32px; + margin: 24px 0 30px 0; + color: #575757; + font-size: 16px; + } } -.datasetIntroCneterBox{ - height: 77vh; - padding: 20px 30px; - background:#ffffff; - border-radius:10px; - box-shadow:0px 2px 12px rgba(180, 182, 191, 0.09); +.datasetIntroCneterBox { + height: 77vh; + padding: 20px 30px; + background: #ffffff; + border-radius: 10px; + box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); } -.datasetIntroTitle{ - color:#1d1d20; - font-size:15px; - margin: 37px 0 10px 0; +.datasetIntroTitle { + margin: 37px 0 10px 0; + color: #1d1d20; + font-size: 15px; } -.datasetIntroText{ - color:#575757; - font-size:14px; - margin-bottom: 30px; +.datasetIntroText { + margin-bottom: 30px; + color: #575757; + font-size: 14px; } -.datasetBox{ - background:#f9fafb; - font-family: 'Alibaba'; - :global{ - .ant-tabs-top >.ant-tabs-nav{ - margin: 0; - } - .ant-pagination{ - text-align: right; - } - +.datasetBox { + font-family: 'Alibaba'; + background: #f9fafb; + :global { + .ant-tabs-top > .ant-tabs-nav { + margin: 0; } + .ant-pagination { + text-align: right; + } + } } -.datasetAllBox{ - :global{ - .ant-tabs-nav .ant-tabs-nav-wrap{ - margin: -48px 0 0 30px; - } - +.datasetAllBox { + :global { + .ant-tabs-nav .ant-tabs-nav-wrap { + margin: -48px 0 0 30px; } + } } -.plusButton{ - margin: 0 18px 0 20px; - background:rgba(22, 100, 255, 0.06); - border:1px solid; - border-color:rgba(22, 100, 255, 0.11); - border-radius:4px; - color:#1d1d20; - font-size:14px; - font-family: 'Alibaba'; +.plusButton { + margin: 0 18px 0 20px; + color: #1d1d20; + font-size: 14px; + font-family: 'Alibaba'; + background: rgba(22, 100, 255, 0.06); + border: 1px solid; + border-color: rgba(22, 100, 255, 0.11); + border-radius: 4px; } -.plusButton:hover{ - background:rgba(22, 100, 255, 0.06)!important; - border:1px solid!important; - border-color:rgba(22, 100, 255, 0.11)!important; - color:#1d1d20!important; +.plusButton:hover { + color: #1d1d20 !important; + background: rgba(22, 100, 255, 0.06) !important; + border: 1px solid !important; + border-color: rgba(22, 100, 255, 0.11) !important; } -.datasetCneterBox{ - display: flex; - justify-content: space-between; - height: 85vh; - width: 100%; - :global{ - .ant-btn{ - color:#1d1d20; - font-size:14px; - } +.datasetCneterBox { + display: flex; + justify-content: space-between; + width: 100%; + height: 85vh; + :global { + .ant-btn { + color: #1d1d20; + font-size: 14px; } - .datasetCneterLeftBox{ - width:340px; - height:100%; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); - margin-right: 10px; - padding-top: 15px; - .custTab{ - display: flex; - border-bottom: 1px solid #e0eaff; - height: 32px; - .tabItem{ - width: 52px; - height: 100%; - text-align: center; - color:#808080; - font-size:15px; - cursor: pointer; - } + } + .datasetCneterLeftBox { + width: 340px; + height: 100%; + margin-right: 10px; + padding-top: 15px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); + .custTab { + display: flex; + height: 32px; + border-bottom: 1px solid #e0eaff; + .tabItem { + width: 52px; + height: 100%; + color: #808080; + font-size: 15px; + text-align: center; + cursor: pointer; + } + } + .leftContentBox { + max-height: 80vh; + padding: 15px 20px; + overflow-x: hidden; + overflow-y: auto; + .itemTitle { + margin-bottom: 15px; + color: #1d1d20; + font-size: 14px; + } + .itemBox { + display: flex; + flex-wrap: wrap; + align-content: start; + width: 110%; + .messageBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 92px; + height: 62px; + margin: 0 12px 20px 0; + padding: 11px 0px 7px 0px; + color: #1d1d20; + font-size: 12px; + border: 1px solid; + border-color: rgba(22, 100, 255, 0.05); + border-radius: 4px; + cursor: pointer; + .ptIcon { + display: block; + } + .hoverIcon { + display: none; + } + .messageText { + width: 65px; + overflow: hidden; + white-space: nowrap; + text-align: center; + text-overflow: ellipsis; + } } - .leftContentBox{ - max-height: 80vh; - overflow-y: auto; - overflow-x: hidden; - padding: 15px 20px; - .itemTitle{ - color:#1d1d20; - font-size:14px; - margin-bottom: 15px; - } - .itemBox{ - width: 110%; - display: flex; - flex-wrap: wrap; - align-content: start; - .messageBox{ - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - cursor: pointer; - width:92px; - height:62px; - border:1px solid; - border-color:rgba(22, 100, 255, 0.05); - border-radius:4px; - margin: 0 12px 20px 0; - padding: 11px 0px 7px 0px; - color:#1d1d20; - font-size:12px; - .ptIcon{ - display: block; - } - .hoverIcon{ - display: none; - } - .messageText{ - width: 65px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - .messageBox:hover{ - background:rgba(22, 100, 255, 0.03); - border:1px solid; - border-color:#1664ff; - .ptIcon{ - display: none; - } - .hoverIcon{ - display: block; - } - } - .active{ - background:rgba(22, 100, 255, 0.03)!important; - border:1px solid!important; - border-color:#1664ff!important; - .ptIcon{ - display: none!important; - } - .hoverIcon{ - display: block!important; - } - } - } + .messageBox:hover { + background: rgba(22, 100, 255, 0.03); + border: 1px solid; + border-color: #1664ff; + .ptIcon { + display: none; + } + .hoverIcon { + display: block; + } } + .active { + background: rgba(22, 100, 255, 0.03) !important; + border: 1px solid !important; + border-color: #1664ff !important; + .ptIcon { + display: none !important; + } + .hoverIcon { + display: block !important; + } + } + } } + } - .datasetCneterRightBox{ - display: flex; - flex-direction: column; - padding: 22px 30px 26px 30px; - flex: 1; - height:100%; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); - .dataSource{ - display: flex; - justify-content: space-between; - align-items: center; - height: 32px; - margin-bottom: 30px; - color:rgba(29, 29, 32, 0.8); - font-size:15px; + .datasetCneterRightBox { + display: flex; + flex: 1; + flex-direction: column; + height: 100%; + padding: 22px 30px 26px 30px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); + .dataSource { + display: flex; + align-items: center; + justify-content: space-between; + height: 32px; + margin-bottom: 30px; + color: rgba(29, 29, 32, 0.8); + font-size: 15px; + } + .dataContent { + display: flex; + flex: 1; + flex-wrap: wrap; + align-content: flex-start; + width: 100%; + .dataItem { + position: relative; + width: 32%; + height: 66px; + margin: 0 15px 18px 0; + background: rgba(128, 128, 128, 0.05); + border-radius: 8px; + box-shadow: 0px 0px 12px rgba(75, 84, 137, 0.05); + cursor: pointer; + .itemText { + position: absolute; + top: 10px; + left: 20px; + color: #1d1d20; + font-size: 15px; + } + .itemTime { + position: absolute; + bottom: 10px; + left: 20px; + color: #808080; + font-size: 14px; } - .dataContent{ - width: 100%; - flex: 1; - display: flex; - flex-wrap: wrap; - align-content: flex-start; - .dataItem{ - width: 32%; - margin: 0 15px 18px 0; - height:66px; - position: relative; - background:rgba(128, 128, 128, 0.05); - border-radius:8px; - box-shadow:0px 0px 12px rgba(75, 84, 137, 0.05); - cursor: pointer; - .itemText{ - position: absolute; - left: 20px; - top: 10px; - color:#1d1d20; - font-size:15px; - - } - .itemTime{ - position: absolute; - left: 20px; - bottom: 10px; - color:#808080; - font-size:14px; - } - .itemIcon{ - position: absolute; - right: 20px; - bottom: 10px; - color:#808080; - font-size:14px; - } - } + .itemIcon { + position: absolute; + right: 20px; + bottom: 10px; + color: #808080; + font-size: 14px; } + } } + } } .modal { - :global { - .ant-modal-content { - background:linear-gradient(180deg,#cfdfff 0%,#d4e2ff 9.77%,#ffffff 40%,#ffffff 100%); - border-radius:21px; - padding: 20px 67px; - width: 825px; - - } - .ant-modal-header{ - background-color: transparent; - margin: 20px 0; - } - .ant-input{ - border-color:#e6e6e6; - height: 40px; - - } - .ant-form-item .ant-form-item-label >label{ - color:rgba(29, 29, 32, 0.8); - } - .ant-modal-footer{ - margin: 40px 0 30px 0; - display: flex; - justify-content: center; - } - .ant-btn{ - width:110px; - height:40px; - font-size:18px; - background:rgba(22, 100, 255, 0.06); - border-radius:10px; - border-color: transparent; - - } - .ant-btn-primary{ - background:#1664ff; - } + :global { + .ant-modal-content { + width: 825px; + padding: 20px 67px; + background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%); + border-radius: 21px; + } + .ant-modal-header { + margin: 20px 0; + background-color: transparent; + } + .ant-input { + height: 40px; + border-color: #e6e6e6; } -} \ No newline at end of file + .ant-form-item .ant-form-item-label > label { + color: rgba(29, 29, 32, 0.8); + } + .ant-modal-footer { + display: flex; + justify-content: center; + margin: 40px 0 30px 0; + } + .ant-btn { + width: 110px; + height: 40px; + font-size: 18px; + background: rgba(22, 100, 255, 0.06); + border-color: transparent; + border-radius: 10px; + } + .ant-btn-primary { + background: #1664ff; + } + } +} diff --git a/react-ui/src/pages/Model/index.jsx b/react-ui/src/pages/Model/index.jsx index 5b93bcec..2e926b87 100644 --- a/react-ui/src/pages/Model/index.jsx +++ b/react-ui/src/pages/Model/index.jsx @@ -1,27 +1,24 @@ - -import React ,{useEffect,useState}from 'react'; -import Styles from './index.less' -import { Input, Space ,Button,Tabs,Pagination,Modal, Form,message, Radio,} from 'antd'; -import { PlusOutlined,PlusCircleOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined ,CopyOutlined} from '@ant-design/icons'; +import { Form, Input, Tabs } from 'antd'; +import { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import Styles from './index.less'; +import PersonalData from './personalData'; +import PublicData from './publicData'; // import {getModelList} from '@/services/dataset/index.js' const { Search } = Input; -import { useNavigate} from 'react-router-dom'; -import moment from 'moment'; const { TabPane } = Tabs; -import PublicData from './publicData'; -import PersonalData from './personalData' -const leftdataList=[1,2,3] +const leftdataList = [1, 2, 3]; -const Dataset= React.FC = () => { - const [queryFlow,setQueryFlow]=useState({ - page:0, - size:10, - name:null +const Dataset = () => { + const [queryFlow, setQueryFlow] = useState({ + page: 0, + size: 10, + name: null, }); - const navgite=useNavigate(); - const [isModalOpen,setIsModalOpen]=useState(false) - const [datasetList,setDatasetList]=useState([]); - const [total,setTotal]=useState(0); + const navgite = useNavigate(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [datasetList, setDatasetList] = useState([]); + const [total, setTotal] = useState(0); const [form] = Form.useForm(); const [dialogTitle, setDialogTitle] = useState('新建数据'); // const getModelLists=()=>{ @@ -35,49 +32,42 @@ const Dataset= React.FC = () => { // } const showModal = () => { - form.resetFields() - setDialogTitle('新建数据集') + form.resetFields(); + setDialogTitle('新建数据集'); setIsModalOpen(true); }; const handleOk = () => { - console.log(1111); + console.log(1111); setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; - const onFinish = (values) => { - - }; - const routeToIntro=(e,record)=>{ - e.stopPropagation() - navgite({pathname:'/dataset/datasetIntro' }); -} + const onFinish = (values) => {}; + const routeToIntro = (e, record) => { + e.stopPropagation(); + navgite({ pathname: '/dataset/datasetIntro' }); + }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; - useEffect(()=>{ - - return ()=>{ - - } - },[]) - return (
-
-
-
- - - - - - - - -
- -
) + useEffect(() => { + return () => {}; + }, []); + return ( +
+
+
+ + + + + + + + +
+
+ ); }; -export default Dataset; \ No newline at end of file +export default Dataset; diff --git a/react-ui/src/pages/Model/index.less b/react-ui/src/pages/Model/index.less index ff21467e..857d0a7c 100644 --- a/react-ui/src/pages/Model/index.less +++ b/react-ui/src/pages/Model/index.less @@ -1,296 +1,293 @@ -.datasetTopBox{ +.datasetTopBox { + display: flex; + align-items: center; + width: 100%; + height: 49px; + padding: 0 30px; + padding-right: 30px; + background-image: url(/assets/images/pipeline-back.png); + background-size: 100% 100%; +} +.datasetIntroTopBox { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + height: 110px; + margin-bottom: 10px; + padding: 25px 30px; + background-image: url(/assets/images/dataset-back.png); + + background-size: 100% 100%; + .smallTagBox { display: flex; align-items: center; - padding-right: 30px; - width: 100%; - height: 49px; - background-size: 100% 100%; - background-image: url(/assets/images/pipeline-back.png); - padding: 0 30px; + color: #1664ff; + font-size: 14px; + .tagItem { + margin-right: 20px; + padding: 4px 10px; + background: rgba(22, 100, 255, 0.1); + border-radius: 4px; + } + } } -.datasetIntroTopBox{ +.dataListBox { + padding: 20px 30px; + color: #1d1d20; + font-size: 16px; + background: #ffffff; + border-radius: 10px; + box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); + .dataButtonList { display: flex; - flex-direction: column; + align-items: center; justify-content: space-between; - width: 100%; - height: 110px; - background-size: 100% 100%; - background-image: url(/assets/images/dataset-back.png); - margin-bottom: 10px; - padding: 25px 30px; - .smallTagBox{ - display: flex; - align-items: center; - color:#1664ff; - font-size:14px; - .tagItem{ - padding: 4px 10px; - background: rgba(22, 100, 255, 0.1); - border-radius:4px; - margin-right: 20px; - } - } -} -.dataListBox{ - padding: 20px 30px; - background:#ffffff; - border-radius:10px; - box-shadow:0px 2px 12px rgba(180, 182, 191, 0.09); - color:#1d1d20; - font-size:16px; - .dataButtonList{ - display: flex; - justify-content: space-between; - align-items: center; - height: 32px; - margin: 24px 0 30px 0; - color:#575757; - font-size:16px; - } + height: 32px; + margin: 24px 0 30px 0; + color: #575757; + font-size: 16px; + } } -.datasetIntroCneterBox{ - height: 77vh; - padding: 20px 30px; - background:#ffffff; - border-radius:10px; - box-shadow:0px 2px 12px rgba(180, 182, 191, 0.09); +.datasetIntroCneterBox { + height: 77vh; + padding: 20px 30px; + background: #ffffff; + border-radius: 10px; + box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); } -.datasetIntroTitle{ - color:#1d1d20; - font-size:15px; - margin: 37px 0 10px 0; +.datasetIntroTitle { + margin: 37px 0 10px 0; + color: #1d1d20; + font-size: 15px; } -.datasetIntroText{ - color:#575757; - font-size:14px; - margin-bottom: 30px; +.datasetIntroText { + margin-bottom: 30px; + color: #575757; + font-size: 14px; } -.datasetBox{ - background:#f9fafb; - font-family: 'Alibaba'; - :global{ - .ant-tabs-top >.ant-tabs-nav{ - margin: 0; - } - .ant-pagination{ - text-align: right; - } +.datasetBox { + font-family: 'Alibaba'; + background: #f9fafb; + :global { + .ant-tabs-top > .ant-tabs-nav { + margin: 0; + } + .ant-pagination { + text-align: right; } + } } -.datasetAllBox{ - :global{ - .ant-tabs-nav .ant-tabs-nav-wrap{ - margin: -48px 0 0 30px; - } - +.datasetAllBox { + :global { + .ant-tabs-nav .ant-tabs-nav-wrap { + margin: -48px 0 0 30px; } + } } -.plusButton{ - margin: 0 18px 0 20px; - background:rgba(22, 100, 255, 0.06); - border:1px solid; - border-color:rgba(22, 100, 255, 0.11); - border-radius:4px; - color:#1d1d20; - font-size:14px; - font-family: 'Alibaba'; +.plusButton { + margin: 0 18px 0 20px; + color: #1d1d20; + font-size: 14px; + font-family: 'Alibaba'; + background: rgba(22, 100, 255, 0.06); + border: 1px solid; + border-color: rgba(22, 100, 255, 0.11); + border-radius: 4px; } -.plusButton:hover{ - background:rgba(22, 100, 255, 0.06)!important; - border:1px solid!important; - border-color:rgba(22, 100, 255, 0.11)!important; - color:#1d1d20!important; +.plusButton:hover { + color: #1d1d20 !important; + background: rgba(22, 100, 255, 0.06) !important; + border: 1px solid !important; + border-color: rgba(22, 100, 255, 0.11) !important; } -.datasetCneterBox{ - display: flex; - justify-content: space-between; - height: 85vh; - width: 100%; - - .datasetCneterLeftBox{ - width:340px; - height:100%; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); - margin-right: 10px; - padding-top: 15px; - .custTab{ - display: flex; - border-bottom: 1px solid #e0eaff; - height: 32px; - .tabItem{ - width: 52px; - height: 100%; - text-align: center; - color:#808080; - font-size:15px; - cursor: pointer; - } +.datasetCneterBox { + display: flex; + justify-content: space-between; + width: 100%; + height: 85vh; + + .datasetCneterLeftBox { + width: 340px; + height: 100%; + margin-right: 10px; + padding-top: 15px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); + .custTab { + display: flex; + height: 32px; + border-bottom: 1px solid #e0eaff; + .tabItem { + width: 52px; + height: 100%; + color: #808080; + font-size: 15px; + text-align: center; + cursor: pointer; + } + } + .leftContentBox { + max-height: 80vh; + padding: 15px 20px; + overflow-x: hidden; + overflow-y: auto; + .itemTitle { + margin-bottom: 15px; + color: #1d1d20; + font-size: 14px; + } + .itemBox { + display: flex; + flex-wrap: wrap; + align-content: start; + width: 110%; + .messageBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 92px; + height: 62px; + margin: 0 12px 20px 0; + padding: 11px 0px 7px 0px; + color: #1d1d20; + font-size: 12px; + border: 1px solid; + border-color: rgba(22, 100, 255, 0.05); + border-radius: 4px; + cursor: pointer; + .ptIcon { + display: block; + } + .hoverIcon { + display: none; + } + .messageText { + width: 65px; + overflow: hidden; + white-space: nowrap; + text-align: center; + text-overflow: ellipsis; + transition: all 0.2s; + } + } + .messageBox:hover { + background: rgba(22, 100, 255, 0.03); + border: 1px solid; + border-color: #1664ff; + .ptIcon { + display: none; + } + .hoverIcon { + display: block; + } } - .leftContentBox{ - max-height: 80vh; - overflow-y: auto; - overflow-x: hidden; - padding: 15px 20px; - .itemTitle{ - color:#1d1d20; - font-size:14px; - margin-bottom: 15px; - } - .itemBox{ - width: 110%; - display: flex; - flex-wrap: wrap; - align-content: start; - .messageBox{ - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - cursor: pointer; - width:92px; - height:62px; - border:1px solid; - border-color:rgba(22, 100, 255, 0.05); - border-radius:4px; - margin: 0 12px 20px 0; - padding: 11px 0px 7px 0px; - color:#1d1d20; - font-size:12px; - .ptIcon{ - display: block; - } - .hoverIcon{ - display: none; - } - .messageText{ - width: 65px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - transition: all 0.2s; - } - } - .messageBox:hover{ - background:rgba(22, 100, 255, 0.03); - border:1px solid; - border-color:#1664ff; - .ptIcon{ - display: none; - } - .hoverIcon{ - display: block; - } - } - .active{ - background:rgba(22, 100, 255, 0.03)!important; - border:1px solid!important; - border-color:#1664ff!important; - .ptIcon{ - display: none!important; - } - .hoverIcon{ - display: block!important; - } - } - } + .active { + background: rgba(22, 100, 255, 0.03) !important; + border: 1px solid !important; + border-color: #1664ff !important; + .ptIcon { + display: none !important; + } + .hoverIcon { + display: block !important; + } } + } } - .datasetCneterRightBox{ - display: flex; - flex-direction: column; - padding: 22px 30px 26px 30px; - flex: 1; - height:100%; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); - .dataSource{ - display: flex; - justify-content: space-between; - align-items: center; - height: 32px; - margin-bottom: 30px; - color:rgba(29, 29, 32, 0.8); - font-size:15px; + } + .datasetCneterRightBox { + display: flex; + flex: 1; + flex-direction: column; + height: 100%; + padding: 22px 30px 26px 30px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); + .dataSource { + display: flex; + align-items: center; + justify-content: space-between; + height: 32px; + margin-bottom: 30px; + color: rgba(29, 29, 32, 0.8); + font-size: 15px; + } + .dataContent { + display: flex; + flex: 1; + flex-wrap: wrap; + align-content: flex-start; + width: 100%; + .dataItem { + position: relative; + width: 32%; + height: 66px; + margin: 0 15px 18px 0; + background: rgba(128, 128, 128, 0.05); + border-radius: 8px; + box-shadow: 0px 0px 12px rgba(75, 84, 137, 0.05); + cursor: pointer; + .itemText { + position: absolute; + top: 10px; + left: 20px; + color: #1d1d20; + font-size: 15px; + } + .itemTime { + position: absolute; + bottom: 10px; + left: 20px; + color: #808080; + font-size: 14px; } - .dataContent{ - width: 100%; - flex: 1; - display: flex; - flex-wrap: wrap; - align-content: flex-start; - .dataItem{ - width: 32%; - margin: 0 15px 18px 0; - height:66px; - position: relative; - background:rgba(128, 128, 128, 0.05); - border-radius:8px; - box-shadow:0px 0px 12px rgba(75, 84, 137, 0.05); - cursor: pointer; - .itemText{ - position: absolute; - left: 20px; - top: 10px; - color:#1d1d20; - font-size:15px; - - } - .itemTime{ - position: absolute; - left: 20px; - bottom: 10px; - color:#808080; - font-size:14px; - } - .itemIcon{ - position: absolute; - right: 20px; - bottom: 10px; - color:#808080; - font-size:14px; - } - } + .itemIcon { + position: absolute; + right: 20px; + bottom: 10px; + color: #808080; + font-size: 14px; } + } } + } } .modal { - :global { - .ant-modal-content { - background:linear-gradient(180deg,#cfdfff 0%,#d4e2ff 9.77%,#ffffff 40%,#ffffff 100%); - border-radius:21px; - padding: 20px 67px; - width: 825px; - - } - .ant-modal-header{ - background-color: transparent; - margin: 20px 0; - } - .ant-input{ - border-color:#e6e6e6; - height: 40px; - - } - .ant-form-item .ant-form-item-label >label{ - color:rgba(29, 29, 32, 0.8); - } - .ant-modal-footer{ - margin: 40px 0 30px 0; - display: flex; - justify-content: center; - } - .ant-btn{ - width:110px; - height:40px; - font-size:18px; - background:rgba(22, 100, 255, 0.06); - border-radius:10px; - border-color: transparent; - } - .ant-btn-primary{ - background:#1664ff; - } + :global { + .ant-modal-content { + width: 825px; + padding: 20px 67px; + background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%); + border-radius: 21px; + } + .ant-modal-header { + margin: 20px 0; + background-color: transparent; + } + .ant-input { + height: 40px; + border-color: #e6e6e6; } -} \ No newline at end of file + .ant-form-item .ant-form-item-label > label { + color: rgba(29, 29, 32, 0.8); + } + .ant-modal-footer { + display: flex; + justify-content: center; + margin: 40px 0 30px 0; + } + .ant-btn { + width: 110px; + height: 40px; + font-size: 18px; + background: rgba(22, 100, 255, 0.06); + border-color: transparent; + border-radius: 10px; + } + .ant-btn-primary { + background: #1664ff; + } + } +} diff --git a/react-ui/src/pages/Model/modelIntro.jsx b/react-ui/src/pages/Model/modelIntro.jsx index 91f0884e..2ce4a7e6 100644 --- a/react-ui/src/pages/Model/modelIntro.jsx +++ b/react-ui/src/pages/Model/modelIntro.jsx @@ -7,7 +7,12 @@ import { getModelVersionsById, } from '@/services/dataset/index.js'; import { downLoadZip } from '@/utils/downloadfile'; -import { DeleteOutlined, PlusCircleOutlined, UploadOutlined } from '@ant-design/icons'; +import { + DeleteOutlined, + DownloadOutlined, + PlusCircleOutlined, + UploadOutlined, +} from '@ant-design/icons'; import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, message } from 'antd'; import moment from 'moment'; import { useEffect, useRef, useState } from 'react'; @@ -57,15 +62,13 @@ const Dataset = () => { const getModelByDetail = () => { getModelById(locationParams.id).then((ret) => { console.log(ret); - if (ret.code == 200) { - setDatasetDetailObj(ret.data); - } + setDatasetDetailObj(ret.data); }); }; const getModelVersionsList = () => { getModelVersionsById(locationParams.id).then((ret) => { console.log(ret); - if (ret.code == 200 && ret.data && ret.data.length > 0) { + if (ret.data && ret.data.length > 0) { setVersionList( ret.data.map((item) => { return { @@ -101,12 +104,8 @@ const Dataset = () => { onOk: () => { deleteModelVersion({ models_id: locationParams.id, version }).then((ret) => { - if (ret.code == 200) { - message.success('删除成功'); - getModelVersions({ version, models_id: locationParams.id }); - } else { - message.error(ret.msg); - } + message.success('删除成功'); + getModelVersions({ version, models_id: locationParams.id }); }); }, }); @@ -121,9 +120,7 @@ const Dataset = () => { const getModelVersions = (params) => { getModelVersionIdList(params).then((ret) => { console.log(ret); - if (ret.code == 200) { - setWordList(ret.data); - } + setWordList(ret.data); }); }; const handleExport = async () => { @@ -150,18 +147,16 @@ const Dataset = () => { console.log('Failed:', errorInfo); }; const columns = [ - // { - // title: '序号', - // dataIndex: 'index', - // key: 'index', - // width: 80, - // render(text, record, index) { - // return ( - // {(pageOption.current.page - 1) * 10 + index + 1} - // ) - // } - // // render: (text, record, index) => `${((curPage-1)*10)+(index+1)}`, - // }, + { + title: '序号', + dataIndex: 'index', + key: 'index', + width: 80, + render(text, record, index) { + return {(pageOption.current.page - 1) * 10 + index + 1}; + }, + // render: (text, record, index) => `${((curPage-1)*10)+(index+1)}`, + }, { title: '文件名称', dataIndex: 'file_name', @@ -184,6 +179,23 @@ const Dataset = () => { key: 'update_time', render: (text) => {moment(text).format('YYYY-MM-DD HH:mm:ss')}, }, + { + title: '操作', + dataIndex: 'option', + width: '100px', + key: 'option', + render: (_, record) => [ + , + ], + }, ]; const pageOption = useRef({ page: 1, size: 10 }); @@ -256,12 +268,15 @@ const Dataset = () => { disabled={!version} style={{ margin: '0 20px 0 0' }} onClick={handleExport} - icon={} + icon={} > 下载 +
+ {wordList.length > 0 ? wordList[0].description : null} +
@@ -300,21 +315,55 @@ const Dataset = () => { - + - - + + - + + + + - + + + }); + + // if (success) { + // if (actionRef.current) { + // actionRef.current.reload(); + // } + // } + }, + }); + }} + > + 删除 + + + ), + }, + ]; + return ( +
+
- - ), - }, - ]; - return (
-
- -
-
- - {dialogTitle} - } open={isModalOpen} className={Styles.modal} okButtonProps={{ - htmlType: 'submit', - form: 'form', - }} onCancel={handleCancel}> + +
+ + + {dialogTitle} + + } + open={isModalOpen} + className={Styles.modal} + okButtonProps={{ + htmlType: 'submit', + form: 'form', + }} + onCancel={handleCancel} + >
{ - )}; -export default Pipeline; \ No newline at end of file + + ); +}; +export default Pipeline; diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts index ca732f12..1036bc86 100644 --- a/react-ui/src/requestConfig.ts +++ b/react-ui/src/requestConfig.ts @@ -40,7 +40,8 @@ export const requestConfig: RequestConfig = { responseInterceptors: [ (response: any) => { const { status, data } = response; - if (status && status >= 200 && status < 300 && data && data.code === 200) { + // console.log('response', response); + if (status >= 200 && status < 300 && data && (data instanceof Blob || data.code === 200)) { return response; } else { if (data && data.msg) { diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less new file mode 100644 index 00000000..a4400afb --- /dev/null +++ b/react-ui/src/styles/theme.less @@ -0,0 +1,8 @@ +// 全局颜色变量 + +@primary-color: #1664ff; // 主色调 + +// 导出变量 +:export { + primaryColor: #1664ff; // FIXME: 设置为 @primary-color 不起作用，感觉是哪里被重置了 +}