Merge branch 'dev' of code.gitlink.org.cn:ci4s/ci4sManagement-cloud into dev

react-ui/src/global.less

@@ -31,6 +31,12 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+a{
+  color:#1664ff;
+}
+.ant-btn-link{
+  color: #1664ff;
+}
 .ant-pro-layout .ant-pro-layout-content {
   padding: 10px;
 }
@@ -46,6 +52,10 @@ body {
 .ant-menu-light .ant-menu-item-selected {
   background: rgba(197, 232, 255, 0.8) !important;
 }
+.ant-pro-layout .ant-pro-sider .ant-layout-sider-children{
+  background:#f2f5f7;
+
+}
 .ant-pro-base-menu-inline {
   // height: 87vh;
   background: #f2f5f7;
@@ -54,7 +64,14 @@ body {
 .ant-pro-layout .ant-pro-layout-content {
   background-color: transparent;
 }
-
+.ant-table-wrapper .ant-table-pagination.ant-pagination{
+  background-color: #fff;
+  margin: 0;
+  padding: 21px 16px;
+}
+.ant-table-wrapper .ant-table{
+  height: 75vh;
+}
 .ant-pro-global-header-logo img {
   height: 21px;
 }
@@ -64,15 +81,38 @@ body {
 .ant-pro-layout .ant-pro-layout-container {
   height: 98vh;
 }
+.ant-modal .ant-modal-close-x{
+  border: 2px solid #272536;
+  border-radius: 50%;
+  width: 26px;
+  height: 26px;
+  color: #272536;
+}
+.ant-modal-content{
+  margin-left: -130px;
+  margin-top: 50px;
+}
+.ant-modal .ant-modal-close:hover {
+  background-color: transparent;
+}
+.ant-modal .ant-modal-footer >.ant-btn+.ant-btn{
+  margin-left: 20px;
+}
 .ant-pagination .ant-pagination-item-active a {
   color: #fff;
   background: #1664ff;
   border-color: #1664ff;
+  border-radius:6px;
 }
-.ant-pagination .ant-pagination-item-active a:hover {
+.ant-pagination .ant-pagination-item-active:hover {
   color: #fff;
   background: rgba(22, 100, 255, 0.8);
   border-color: rgba(22, 100, 255, 0.8);
+  border-radius:6px;
+}
+.ant-pagination .ant-pagination-item {
+  border: 1px solid #e6e6e6;
+  border-radius:6px;
 }
 // ::-webkit-scrollbar-button {
 //   background: #97a1bd;

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

@@ -39,9 +39,9 @@ const Dataset = () => {
             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,
+              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,
             };
           }),
         );
@@ -59,18 +59,16 @@ const Dataset = () => {
   const locationParams = useParams(); //新版本获取路由参数接口
   const [wordList, setWordList] = useState([]);
   const [activeTabKey, setActiveTabKey] = useState('1');
-  const [uuid, setUuid] = useState(Date.now());
   const getDatasetByDetail = () => {
     getDatasetById(locationParams.id).then((ret) => {
       console.log(ret);
       setDatasetDetailObj(ret.data);
     });
   };
-  // 获取数据集版本
   const getDatasetVersionList = () => {
     getDatasetVersionsById(locationParams.id).then((ret) => {
       console.log(ret);
-      if (ret && ret.data && ret.data.length > 0) {
+      if (ret.data && ret.data.length > 0) {
         setVersionList(
           ret.data.map((item) => {
             return {
@@ -79,8 +77,6 @@ const Dataset = () => {
             };
           }),
         );
-        setVersion(ret.data[0]);
-        getDatasetVersions({ version: ret.data[0], dataset_id: locationParams.id });
       }
     });
   };
@@ -94,7 +90,6 @@ const Dataset = () => {
     form.setFieldsValue({ name: datasetDetailObj.name });
 
     setDialogTitle('创建新版本');
-    setUuid(Date.now());
     setIsModalOpen(true);
   };
   const handleCancel = () => {
@@ -114,7 +109,9 @@ const Dataset = () => {
 
       onOk: () => {
         deleteDatasetVersion({ dataset_id: locationParams.id, version }).then((ret) => {
+          setVersion(null);
           getDatasetVersionList();
+          getDatasetVersions({ version, dataset_id: locationParams.id });
           message.success('删除成功');
         });
       },
@@ -127,7 +124,6 @@ const Dataset = () => {
       message.success('创建成功');
     });
   };
-  // 获取版本下的文件列表
   const getDatasetVersions = (params) => {
     getDatasetVersionIdList(params).then((res) => {
       setWordList(res?.data?.content ?? []);
@@ -372,7 +368,7 @@ const Dataset = () => {
               },
             ]}
           >
-            <Upload {...props} data={{ uuid: uuid }}>
+            <Upload {...props}>
               <Button
                 style={{
                   fontSize: '14px',

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

@@ -263,7 +263,10 @@
     .ant-modal-content {
       width: 825px;
       padding: 20px 67px;
-      background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%);
+      background-image: url(/assets/images/modal-back.png);
+      background-repeat:no-repeat;
+      background-size:100%;
+      background-position: top center;
       border-radius: 21px;
     }
     .ant-modal-header {

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

@@ -322,30 +322,27 @@ const PublicData = (React.FC = () => {
           <Form.Item
             label="数据名称"
             name="name"
-            rules={
-              [
-                //   {
-                //     required: true,
-                //     message: 'Please input your username!',
-                //   },
-              ]
-            }
+            required
+            rules={[
+              {
+                required: true,
+                message: '请输入数据名称e!',
+              },
+            ]}
           >
-            <Input placeholder="请输入数据名称" />
+            <Input placeholder="请输入数据名称" showCount maxLength={64} />
           </Form.Item>
           <Form.Item
             label="数据集版本"
             name="version"
-            rules={
-              [
-                //   {
-                //     required: true,
-                //     message: 'Please input your username!',
-                //   },
-              ]
-            }
+            rules={[
+              {
+                required: true,
+                message: '请输入数据集版本!',
+              },
+            ]}
           >
-            <Input placeholder="请输入数据集版本" />
+            <Input placeholder="请输入数据集版本" showCount maxLength={64} />
           </Form.Item>
           <Form.Item
             label="数据集分类"
@@ -402,7 +399,7 @@ const PublicData = (React.FC = () => {
               ]
             }
           >
-            <Input placeholder="请输入数据简介" />
+            <Input placeholder="请输入数据简介" showCount maxLength={256} />
           </Form.Item>
           <Form.Item label="选择流水线" name="range">
             <Radio.Group>

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

@@ -259,7 +259,10 @@
     .ant-modal-content {
       width: 825px;
       padding: 20px 67px;
-      background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%);
+      background-image: url(/assets/images/modal-back.png);
+      background-repeat:no-repeat;
+      background-size:100%;
+      background-position: top center;
       border-radius: 21px;
     }
     .ant-modal-header {

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

@@ -39,9 +39,9 @@ const Dataset = () => {
             return {
               ...form.getFieldsValue(),
               models_id: locationParams.id,
-              file_name: item.response.data[0].fileName,
-              file_size: item.response.data[0].fileSize,
-              url: item.response.data[0].url,
+              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,
             };
           }),
         );

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

@@ -325,16 +325,14 @@ const PublicData = () => {
           <Form.Item
             label="模型名称"
             name="name"
-            rules={
-              [
-                //   {
-                //     required: true,
-                //     message: 'Please input your username!',
-                //   },
-              ]
-            }
+            rules={[
+              {
+                required: true,
+                message: '请输入模型名称!',
+              },
+            ]}
           >
-            <Input placeholder="请输入模型名称" />
+            <Input placeholder="请输入模型名称" showCount maxLength={64} />
           </Form.Item>
 
           <Form.Item
@@ -355,16 +353,14 @@ const PublicData = () => {
           <Form.Item
             label="模型描述"
             name="description"
-            rules={
-              [
-                //   {
-                //     required: true,
-                //     message: 'Please input your username!',
-                //   },
-              ]
-            }
+            rules={[
+              {
+                required: true,
+                message: '请输入模型描述!',
+              },
+            ]}
           >
-            <Input placeholder="请输入模型描述" />
+            <Input placeholder="请输入模型描述" showCount maxLength={256} />
           </Form.Item>
           <Form.Item label="可见范围" name="available_range">
             <Radio.Group>

react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx

@@ -42,6 +42,7 @@ const modelMenus = ({ onParDragEnd }) => {
   const { Panel } = Collapse;
   return (
     <div style={{ width: '250px', height: '99%' }} className={Styles.collapse}>
+      <div className={Styles.modelMenusTitle}>组件库</div>
       <Collapse collapsible="header" defaultActiveKey={['1']} expandIconPosition="end">
         {modelMenusList && modelMenusList.length > 0
           ? modelMenusList.map((item) => (

react-ui/src/pages/Pipeline/editPipeline/modelMenus.less

@@ -12,6 +12,7 @@
 }
 .collapseItem:hover {
   background: rgba(22, 100, 255, 0.08);
+  color:#1664ff;
 }
 .collapse {
   :global {
@@ -23,10 +24,12 @@
       margin-bottom: 5px;
       background-color: #fff;
       border-color: transparent;
+      padding: 20px 16px 15px 16px;
     }
+
     .ant-collapse > .ant-collapse-item {
       margin: 0 10px;
-      border-color: rgba(20, 49, 179, 0.12);
+      border-bottom:0.5px dashed rgba(20, 49, 179, 0.12);
       border-radius: 0px;
     }
     .ant-collapse .ant-collapse-content {
@@ -38,3 +41,10 @@
     }
   }
 }
+.modelMenusTitle{
+  padding: 12px 25px;
+  margin-bottom: 10px;
+  color:#111111;
+font-size:16px;
+font-family: 'Alibaba';
+}

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

@@ -111,7 +111,8 @@ const Pipeline = () => {
       title: '序号',
       dataIndex: 'index',
       key: 'index',
-      width: 80,
+      width: 140,
+      align: 'center',
       render(text, record, index) {
         return <span>{(pageOption.current.page - 1) * 10 + index + 1}</span>;
       },
@@ -143,6 +144,7 @@ const Pipeline = () => {
     {
       title: '操作',
       key: 'action',
+      width: 320,
 
       render: (_, record) => (
         <Space size="small">
@@ -275,30 +277,26 @@ const Pipeline = () => {
           <Form.Item
             label="流水线名称"
             name="name"
-            rules={
-              [
-                //   {
-                //     required: true,
-                //     message: 'Please input your username!',
-                //   },
-              ]
-            }
+            rules={[
+              {
+                required: true,
+                message: '请输入流水线名称',
+              },
+            ]}
           >
-            <Input />
+            <Input showCount maxLength={64} />
           </Form.Item>
           <Form.Item
             label="流水线描述"
             name="description"
-            rules={
-              [
-                //   {
-                //     required: true,
-                //     message: 'Please input your username!',
-                //   },
-              ]
-            }
+            rules={[
+              {
+                required: true,
+                message: '请输入流水线描述',
+              },
+            ]}
           >
-            <Input />
+            <Input showCount maxLength={128} />
           </Form.Item>
         </Form>
       </Modal>

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

@@ -29,7 +29,10 @@
     .ant-modal-content {
       width: 825px;
       padding: 20px 67px;
-      background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%);
+      background-image: url(/assets/images/modal-back.png);
+      background-repeat:no-repeat;
+      background-size:100%;
+      background-position: top center;
       border-radius: 21px;
     }
     .ant-modal-header {