删除框

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;

react-ui/src/pages/Dataset/datasetIntro.jsx

@@ -102,8 +102,17 @@ const Dataset = () => {
   };
   const deleteDataset = () => {
     Modal.confirm({
-      title: '删除',
-      content: '确定删除数据集版本？',
+      title: (
+        <div>
+          <img
+            src="/assets/images/delete-icon.png"
+            style={{ width: '120px', marginBottom: '24px' }}
+            alt=""
+          />
+          <div style={{ color: '#1d1d20', fontSize: '16px' }}>删除后，该数据集版本将不可恢复</div>
+        </div>
+      ),
+      content: <div style={{ color: '#1d1d20', fontSize: '15px' }}>是否确认删除?</div>,
       okText: '确认',
       cancelText: '取消',
 

react-ui/src/pages/Experiment/index.jsx

@@ -350,8 +350,20 @@ function Experiment() {
             icon={<DeleteOutlined />}
             onClick={async () => {
               Modal.confirm({
-                title: '删除',
-                content: '确定删除该条实验吗？',
+                title: (
+                  <div>
+                    <img
+                      src="/assets/images/delete-icon.png"
+                      style={{ width: '120px', marginBottom: '24px' }}
+                      alt=""
+                    />
+                    <div style={{ color: '#1d1d20', fontSize: '16px' }}>
+                      删除后，该实验将不可恢复
+                    </div>
+                  </div>
+                ),
+                content: <div style={{ color: '#1d1d20', fontSize: '15px' }}>是否确认删除?</div>,
+                closable: true,
                 okText: '确认',
                 cancelText: '取消',
 

react-ui/src/pages/Model/modelIntro.jsx

@@ -101,8 +101,17 @@ const Dataset = () => {
   };
   const deleteDataset = () => {
     Modal.confirm({
-      title: '删除',
-      content: '确定删除模型版本？',
+      title: (
+        <div>
+          <img
+            src="/assets/images/delete-icon.png"
+            style={{ width: '120px', marginBottom: '24px' }}
+            alt=""
+          />
+          <div style={{ color: '#1d1d20', fontSize: '16px' }}>删除后，该模型版本将不可恢复</div>
+        </div>
+      ),
+      content: <div style={{ color: '#1d1d20', fontSize: '15px' }}>是否确认删除?</div>,
       okText: '确认',
       cancelText: '取消',
 

react-ui/src/pages/Pipeline/index.jsx

@@ -201,14 +201,27 @@ const Pipeline = () => {
             icon={<DeleteOutlined />}
             onClick={async () => {
               Modal.confirm({
-                title: '删除',
-                content: '确定删除该条流水线吗？',
+                title: (
+                  <div>
+                    <img
+                      src="/assets/images/delete-icon.png"
+                      style={{ width: '120px', marginBottom: '24px' }}
+                      alt=""
+                    />
+                    <div style={{ color: '#1d1d20', fontSize: '16px' }}>
+                      删除后，该流水线将不可恢复
+                    </div>
+                  </div>
+                ),
+                content: <div style={{ color: '#1d1d20', fontSize: '15px' }}>是否确认删除?</div>,
+                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 {

react-ui/src/pages/Pipeline/index.less

@@ -62,5 +62,6 @@
     .ant-btn-primary {
       background: #1664ff;
     }
+    
   }
 }