格式校验

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/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

@@ -311,30 +311,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="数据集分类"
@@ -391,7 +388,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/personalData.jsx

@@ -314,31 +314,27 @@ 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
             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/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 {