Merge pull request 'x' (#16) from origin/dev into master

react-ui/src/components/KFModal/index.tsx

@@ -15,7 +15,6 @@ function KFModal({ title, image, children, className, ...rest }: KFModalProps) {
       className={classNames(['kf-modal', className])}
       {...rest}
       title={<ModalTitle title={title} image={image}></ModalTitle>}
-      closeIcon={<CloseIcon></CloseIcon>}
     >
       {children}
     </Modal>

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/Experiment/experimentText/index.jsx

@@ -168,6 +168,27 @@ function ExperimentText() {
   }, [message]);
 
   const initGraph = () => {
+    const fittingString = (str, maxWidth, fontSize) => {
+      const ellipsis = '...';
+      const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
+      let currentWidth = 0;
+      let res = str;
+      const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
+      str.split('').forEach((letter, i) => {
+        if (currentWidth > maxWidth - ellipsisLength) return;
+        if (pattern.test(letter)) {
+          // Chinese charactors
+          currentWidth += fontSize;
+        } else {
+          // get the width of single letter according to the fontSize
+          currentWidth += G6.Util.getLetterWidth(letter, fontSize);
+        }
+        if (currentWidth > maxWidth - ellipsisLength) {
+          res = `${str.substr(0, i)}${ellipsis}`;
+        }
+      });
+      return res;
+    };
     G6.registerNode(
       'rect-node',
       {
@@ -194,19 +215,21 @@ function ExperimentText() {
             },
             draggable: true,
           });
-          // if (cfg.label) {
-          //   group.addShape('text', {
-          //     attrs: {
-          //       x: 0,
-          //       y: cfg.height / 2 - 5,
-          //       textAlign: 'center',
-          //       textBaseline: 'middle',
-          //       text: cfg.label,
-          //       fill: '#fff',
-          //     },
-          //     draggable: true,
-          //   });
-          // }
+          if (cfg.label) {
+            group.addShape('text', {
+              attrs: {
+                text: fittingString(cfg.label, 70, 10),
+                x: -20,
+                y: 0,
+                fontSize: 10,
+                textAlign: 'left',
+                textBaseline: 'middle',
+                fill: '#000',
+              },
+              name: 'text-shape',
+              draggable: true,
+            });
+          }
           const bbox = group.getBBox();
           const anchorPoints = this.getAnchorPoints(cfg);
           // console.log(anchorPoints);

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 {