diff --git a/react-ui/public/assets/images/delete-icon.png b/react-ui/public/assets/images/delete-icon.png new file mode 100644 index 00000000..310f8bb8 Binary files /dev/null and b/react-ui/public/assets/images/delete-icon.png differ diff --git a/react-ui/src/global.less b/react-ui/src/global.less index 29b900b5..22ff0085 100644 --- a/react-ui/src/global.less +++ b/react-ui/src/global.less @@ -81,6 +81,37 @@ a{ .ant-pro-layout .ant-pro-layout-container { height: 98vh; } +.ant-modal-confirm .ant-modal-confirm-paragraph{ + margin: 40px 0 auto; + text-align: center; +} +.ant-modal-confirm-confirm .ant-modal-confirm-body>.anticon{ + display: none; +} +.ant-modal-confirm .ant-modal-confirm-btns { + margin-top: 30px; + text-align: center; +} +.ant-modal-confirm-btns .ant-btn-default{ + width:91px; +height:42px; +background:rgba(22, 100, 255, 0.06); +border-radius:10px; +color:#1d1d20; +font-size:16px; +margin-right: 10px; +} +.ant-modal-confirm-btns .ant-btn-default:hover{ + background:rgba(22, 100, 255, 0.06); + border-color: transparent; +} +.ant-modal-confirm-btns .ant-btn-primary{ + width:91px; + height:42px; + background:#1664ff; + border-radius:10px; + font-size: 16px; +} .ant-modal .ant-modal-close-x{ border: 2px solid #272536; border-radius: 50%; @@ -91,6 +122,18 @@ a{ .ant-modal-content{ margin-left: -130px; margin-top: 50px; + +} +.ant-modal .ant-modal-content{ + padding: 0; +} +.ant-modal-confirm-body-wrapper{ +height:303px; +border-radius:21px; +background-image: url(/assets/images/modal-back.png); +background-repeat:no-repeat; +background-size:100%; +background-position: top center; } .ant-modal .ant-modal-close:hover { background-color: transparent; diff --git a/react-ui/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/datasetIntro.jsx index bdc9171b..bc76c44e 100644 --- a/react-ui/src/pages/Dataset/datasetIntro.jsx +++ b/react-ui/src/pages/Dataset/datasetIntro.jsx @@ -102,8 +102,17 @@ const Dataset = () => { }; const deleteDataset = () => { Modal.confirm({ - title: '删除', - content: '确定删除数据集版本?', + title: ( +
+ +
删除后,该数据集版本将不可恢复
+
+ ), + content:
是否确认删除?
, okText: '确认', cancelText: '取消', diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx index b57c0ce9..926a5852 100644 --- a/react-ui/src/pages/Experiment/index.jsx +++ b/react-ui/src/pages/Experiment/index.jsx @@ -350,8 +350,20 @@ function Experiment() { icon={} onClick={async () => { Modal.confirm({ - title: '删除', - content: '确定删除该条实验吗?', + title: ( +
+ +
+ 删除后,该实验将不可恢复 +
+
+ ), + content:
是否确认删除?
, + closable: true, okText: '确认', cancelText: '取消', diff --git a/react-ui/src/pages/Model/modelIntro.jsx b/react-ui/src/pages/Model/modelIntro.jsx index fe683e8b..36478412 100644 --- a/react-ui/src/pages/Model/modelIntro.jsx +++ b/react-ui/src/pages/Model/modelIntro.jsx @@ -101,8 +101,17 @@ const Dataset = () => { }; const deleteDataset = () => { Modal.confirm({ - title: '删除', - content: '确定删除模型版本?', + title: ( +
+ +
删除后,该模型版本将不可恢复
+
+ ), + content:
是否确认删除?
, okText: '确认', cancelText: '取消', diff --git a/react-ui/src/pages/Pipeline/index.jsx b/react-ui/src/pages/Pipeline/index.jsx index 1bc9754e..d7cd31a6 100644 --- a/react-ui/src/pages/Pipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/index.jsx @@ -201,14 +201,27 @@ const Pipeline = () => { icon={} onClick={async () => { Modal.confirm({ - title: '删除', - content: '确定删除该条流水线吗?', + title: ( +
+ +
+ 删除后,该流水线将不可恢复 +
+
+ ), + content:
是否确认删除?
, + closable: true, + okText: '确认', cancelText: '取消', onOk: () => { console.log(record); removeWorkflow(record.id).then((ret) => { - if (ret.code == 200) { + if (ret.code === 200) { message.success('删除成功'); getList(); } else { diff --git a/react-ui/src/pages/Pipeline/index.less b/react-ui/src/pages/Pipeline/index.less index 29f5ba39..05c793b0 100644 --- a/react-ui/src/pages/Pipeline/index.less +++ b/react-ui/src/pages/Pipeline/index.less @@ -62,5 +62,6 @@ .ant-btn-primary { background: #1664ff; } + } }