Merge remote-tracking branch 'origin/dev' into dev

react-ui/src/global.less

@@ -58,6 +58,10 @@ body {
 .ant-pro-layout .ant-pro-sider-menu {
   padding-top: 40px;
 }
+.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child,.ant-table-wrapper .ant-table-container table>tbody>tr:first-child{
+  padding: 0 30px;
+}
+
 .ant-pro-global-header-logo-mix {
   width: 257px;
   height: 75px;
@@ -98,6 +102,7 @@ body {
 }
 .ant-table-wrapper .ant-table {
   height: 81vh;
+  overflow-y: auto;
 }
 .ant-pro-global-header-logo img {
   height: 21px;
@@ -144,12 +149,14 @@ body {
   height: 46px;
   padding: 1px 11px;
 }
+
 .ant-modal .ant-select-single {
   height: 46px;
 }
 .ant-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
   line-height: 46px;
 }
+
 .ant-modal .ant-modal-close-x {
   width: 26px;
   height: 26px;
@@ -182,6 +189,8 @@ body {
   margin-left: 20px;
 }
 .ant-pagination .ant-pagination-item-active a {
+  color: #fff;
+  background: rgba(22, 100, 255, 0.8);
   // color: #fff;
   border-radius: 6px;
 }

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

@@ -1,4 +1,5 @@
 import { getAccessToken } from '@/access';
+import KFIcon from '@/components/KFIcon';
 import {
   addDatasetVersionDetail,
   deleteDatasetVersion,
@@ -7,12 +8,7 @@ import {
   getDatasetVersionsById,
 } from '@/services/dataset/index.js';
 import { downLoadZip } from '@/utils/downloadfile';
-import {
-  DeleteOutlined,
-  DownloadOutlined,
-  PlusCircleOutlined,
-  UploadOutlined,
-} from '@ant-design/icons';
+import { UploadOutlined } from '@ant-design/icons';
 import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, message } from 'antd';
 import moment from 'moment';
 import { useEffect, useRef, useState } from 'react';
@@ -203,7 +199,7 @@ const Dataset = () => {
           type="link"
           size="small"
           key="download"
-          icon={<DownloadOutlined />}
+          icon={<KFIcon type="icon-xiazai" />}
           onClick={(e) => downloadAlone(e, record)}
         >
           下载
@@ -227,9 +223,9 @@ const Dataset = () => {
       <div className={Styles.datasetIntroTopBox}>
         <span style={{ color: '#1d1d20', fontSize: '20px' }}>{datasetDetailObj.name}</span>
         <div className={Styles.smallTagBox}>
+          <div className={Styles.tagItem}>数据集 id：{datasetDetailObj.id}</div>
           <div className={Styles.tagItem}>{datasetDetailObj.data_tag || '...'}</div>
           <div className={Styles.tagItem}>{datasetDetailObj.data_type}</div>
-          {/* <div className={Styles.tagItem}>English</div> */}
         </div>
       </div>
       <div className={Styles.datasetIntroCneterBox}>
@@ -257,10 +253,10 @@ const Dataset = () => {
                     options={versionList}
                   />
                   <Button
-                    type="primary"
+                    type="default"
                     className={Styles.plusButton}
                     onClick={showModal}
-                    icon={<PlusCircleOutlined style={{ color: '#1664ff' }} />}
+                    icon={<KFIcon type="icon-xinjian2" />}
                   >
                     创建新版本
                   </Button>
@@ -269,21 +265,21 @@ const Dataset = () => {
                   style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                 >
                   <Button
-                    type="primary"
+                    type="default"
                     className={Styles.plusButton}
                     style={{ margin: '0 20px 0 0' }}
                     onClick={deleteDataset}
-                    icon={<DeleteOutlined style={{ color: '#1664ff' }} />}
+                    icon={<KFIcon type="icon-shanchu" />}
                   >
                     删除
                   </Button>
                   <Button
-                    type="primary"
+                    type="default"
                     disabled={!version}
                     className={Styles.plusButton}
                     style={{ margin: '0 20px 0 0' }}
                     onClick={handleExport}
-                    icon={<DownloadOutlined style={{ color: '#1664ff' }} />}
+                    icon={<KFIcon type="icon-xiazai" />}
                   >
                     下载
                   </Button>

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

@@ -5,9 +5,9 @@
   height: 49px;
   padding: 0 30px;
   padding-right: 30px;
+  font-family: 'Alibaba';
   background-image: url(/assets/images/pipeline-back.png);
   background-size: 100% 100%;
-  font-family: 'Alibaba';
 }
 .datasetIntroTopBox {
   display: flex;
@@ -36,10 +36,10 @@
   padding: 20px 30px;
   color: #1d1d20;
   font-size: 16px;
+  font-family: alibaba;
   background: #ffffff;
   border-radius: 10px;
   box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09);
-  font-family: alibaba;
   .dataButtonList {
     display: flex;
     align-items: center;
@@ -70,7 +70,7 @@
 .datasetBox {
   font-family: 'Alibaba';
   background: #f9fafb;
-  
+
   :global {
     .ant-tabs-top > .ant-tabs-nav {
       margin: 0;
@@ -89,20 +89,8 @@
 }
 .plusButton {
   margin: 0 18px 0 20px;
-  color: #1d1d20;
-  font-size: 14px;
-  font-family: 'Alibaba';
-  background: rgba(22, 100, 255, 0.06);
-  border: 1px solid;
-  border-color: rgba(22, 100, 255, 0.11);
-  border-radius: 4px;
-}
-.plusButton:hover {
-  color: #1d1d20 !important;
-  background: rgba(22, 100, 255, 0.06) !important;
-  border: 1px solid !important;
-  border-color: rgba(22, 100, 255, 0.11) !important;
 }
+
 .datasetCneterBox {
   display: flex;
   justify-content: space-between;
@@ -119,8 +107,8 @@
     height: 100%;
     margin-right: 10px;
     padding-top: 15px;
-    background: #ffffff;
     font-family: 'Alibaba';
+    background: #ffffff;
     box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
     .custTab {
       display: flex;
@@ -211,6 +199,7 @@
     flex: 1;
     flex-direction: column;
     height: 100%;
+    overflow-y: auto;
     padding: 22px 30px 26px 30px;
     background: #ffffff;
     box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
@@ -229,67 +218,70 @@
       flex-wrap: wrap;
       align-content: flex-start;
 
-      width: 102%;
+      width: 100%;
       .dataItem {
         position: relative;
-        width: 23.5%;
+        width: 23.8%;
         height:164px;
-        background:#ffffff;
-        border:1px solid;
-        border-color:#eaeaea;
-        border-radius:4px;
         margin: 0 20px 25px 0;
+        background: #ffffff;
+        border: 1px solid;
+        border-color: #eaeaea;
+        border-radius: 4px;
         cursor: pointer;
         .itemText {
           position: absolute;
           top: 20px;
           left: 20px;
-          background: linear-gradient(to right ,rgba(22, 100, 255,0.6) 0,rgba(22, 100, 255,0) 100%);
           height: 6px;
-          line-height: 0px;
-          color:#1d1d20;
-          font-size:16px;
+          color: #1d1d20;
+          font-size: 16px;
           font-family: 'Alibaba';
+          line-height: 0px;
+          background: linear-gradient(
+            to right,
+            rgba(22, 100, 255, 0.6) 0,
+            rgba(22, 100, 255, 0) 100%
+          );
         }
-        .itemDescripition{
+        .itemDescripition {
           position: absolute;
           top: 57px;
           left: 20px;
+          display: -webkit-box;
           padding-right: 28px;
-          color:#575757;
-          font-size:14px;
-          word-break: break-all;
           overflow: hidden;
-          display: -webkit-box;
+          color: #575757;
+          font-size: 14px;
+          word-break: break-all;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
         }
         .itemTime {
           position: absolute;
-          display: flex;
-          align-items: center;
           bottom: 22px;
           left: 20px;
+          display: flex;
+          align-items: center;
           color: #808080;
           font-size: 13px;
         }
         .itemIcon {
           position: absolute;
-          display: flex;
-          align-items: center;
           right: 20px;
           bottom: 22px;
+          display: flex;
+          align-items: center;
           color: #808080;
           font-size: 13px;
         }
       }
-      .dataItem:hover{
-        border-color: #1664FF;
-        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1)
-       
+      .dataItem:hover {
+        border-color: #1664ff;
+        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
       }
-      .dataItem:hover .itemText{
-        color: #1664FF;
+      .dataItem:hover .itemText {
+        color: #1664ff;
       }
     }
   }
@@ -300,9 +292,9 @@
       width: 825px;
       padding: 20px 67px;
       background-image: url(/assets/images/modal-back.png);
-      background-repeat:no-repeat;
-      background-size:100%;
+      background-repeat: no-repeat;
       background-position: top center;
+      background-size: 100%;
       border-radius: 21px;
     }
     .ant-modal-header {

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

@@ -3,13 +3,13 @@ import creatByImg from '@/assets/img/creatBy.png';
 import { getAssetIcon, getDatasetList } from '@/services/dataset/index.js';
 import { Form, Input, Pagination } from 'antd';
 import moment from 'moment';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Styles from './index.less';
 const { Search } = Input;
 const leftdataList = [1, 2, 3];
 
-const PublicData = (React.FC = () => {
+const PublicData = () => {
   const [queryFlow, setQueryFlow] = useState({
     page: 0,
     size: 10,
@@ -256,5 +256,5 @@ const PublicData = (React.FC = () => {
       </div>
     </>
   );
-});
+};
 export default PublicData;

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

@@ -18,6 +18,7 @@ import { elapsedTime } from '@/utils/date';
 import { to } from '@/utils/promise';
 import { modalConfirm } from '@/utils/ui';
 import { Button, ConfigProvider, Space, Table, message } from 'antd';
+import classNames from 'classnames';
 import momnet from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -223,6 +224,7 @@ function Experiment() {
   };
   const pageOption = useRef({ page: 1, size: 10 });
   const paginationProps = {
+    showSizeChanger: true,
     showQuickJumper: true,
     showTotal: () => `共${total}条`,
     total: total,
@@ -273,12 +275,14 @@ function Experiment() {
       dataIndex: 'name',
       key: 'name',
       render: (text) => <div>{text}</div>,
+      width: '20%',
     },
     {
       title: '关联流水线名称',
       dataIndex: 'workflow_name',
       key: 'workflow_name',
       render: (text, record) => <a onClick={(e) => routeToEdit(e, record)}>{text}</a>,
+      width: '20%',
     },
     {
       title: '实验描述',
@@ -289,6 +293,7 @@ function Experiment() {
       title: '最近五次运行状态',
       dataIndex: 'status_list',
       key: 'status_list',
+      width: 200,
       render: (text) => {
         let newText = text && text.replace(/\s+/g, '').split(',');
         return (
@@ -375,18 +380,8 @@ function Experiment() {
   ];
   return (
     <div>
-      {/* <div >
-        <Button type="primary"  onClick={createExperiment} icon = {< PlusOutlined />}>
-          新建实验
-        </Button>
-        </div> */}
       <div className={Styles.pipelineTopBox}>
-        <Button
-          type="primary"
-          className={Styles.plusButton}
-          onClick={createExperiment}
-          icon={<KFIcon type="icon-xinjian2" />}
-        >
+        <Button type="default" onClick={createExperiment} icon={<KFIcon type="icon-xinjian2" />}>
           新建实验
         </Button>
       </div>
@@ -400,12 +395,14 @@ function Experiment() {
             <div>
               {experimentInList && experimentInList.length > 0 ? (
                 <div className={Styles.tableExpandBox} style={{ paddingBottom: '16px' }}>
-                  <div style={{ width: '150px' }}>序号</div>
-                  <div style={{ width: '300px' }}>TensorBoard</div>
-                  <div style={{ width: '300px' }}>运行时长</div>
-                  <div style={{ width: '300px' }}>开始时间</div>
-                  <div style={{ width: '200px' }}>状态</div>
-                  <div style={{ width: '200px' }}>操作</div>
+                  <div className={Styles.index}>序号</div>
+                  <div className={Styles.tensorBoard}>可视化</div>
+                  <div className={Styles.description}>
+                    <div style={{ width: '50%' }}>运行时长</div>
+                    <div style={{ width: '50%' }}>开始时间</div>
+                  </div>
+                  <div className={Styles.status}>状态</div>
+                  <div className={Styles.operation}>操作</div>
                 </div>
               ) : (
                 ''
@@ -415,17 +412,16 @@ function Experiment() {
                 ? experimentInList.map((item, index) => (
                     <div
                       key={item.id}
-                      className={Styles.tableExpandBox}
-                      style={{
-                        border: '1px solid #eaeaea',
-                        backgroundColor: '#fff',
-                        height: '45px',
-                      }}
+                      className={classNames(Styles.tableExpandBox, Styles.tableExpandBoxContent)}
                     >
-                      <a style={{ width: '150px' }} onClick={(e) => routerToText(e, item, record)}>
+                      <a
+                        className={Styles.index}
+                        style={{ padding: '0 16px' }}
+                        onClick={(e) => routerToText(e, item, record)}
+                      >
                         {index + 1}
                       </a>
-                      <div style={{ width: '300px' }}>
+                      <div className={Styles.tensorBoard}>
                         {item.nodes_result?.tensorboard_log ? (
                           <TensorBoardStatus
                             status={item.tensorBoardStatus}
@@ -435,15 +431,17 @@ function Experiment() {
                           '-'
                         )}
                       </div>
-                      <div style={{ width: '300px' }}>
-                        {item.finish_time
-                          ? elapsedTime(new Date(item.create_time), new Date(item.finish_time))
-                          : elapsedTime(new Date(item.create_time), new Date())}
-                      </div>
-                      <div style={{ width: '300px' }}>
-                        {momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}
+                      <div className={Styles.description}>
+                        <div style={{ width: '50%' }}>
+                          {item.finish_time
+                            ? elapsedTime(new Date(item.create_time), new Date(item.finish_time))
+                            : elapsedTime(new Date(item.create_time), new Date())}
+                        </div>
+                        <div style={{ width: '50%' }}>
+                          {momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}
+                        </div>
                       </div>
-                      <div className={Styles.statusBox} style={{ width: '200px' }}>
+                      <div className={Styles.statusBox}>
                         <img
                           style={{ width: '17px', marginRight: '7px' }}
                           src={experimentStatusInfo[item.status]?.icon}
@@ -455,7 +453,7 @@ function Experiment() {
                           {experimentStatusInfo[item.status]?.label}
                         </span>
                       </div>
-                      <div style={{ width: '200px' }}>
+                      <div className={Styles.operation}>
                         <Button
                           type="link"
                           size="small"

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

@@ -19,35 +19,54 @@
   background-image: url(/assets/images/pipeline-back.png);
   background-size: 100% 100%;
 }
-.plusButton {
-  color: #1d1d20;
-  font-size: 14px;
-  font-family: 'Alibaba';
-  background: rgba(22, 100, 255, 0.06);
-  border: 1px solid;
-  border-color: rgba(22, 100, 255, 0.11);
-  border-radius: 4px;
-}
-.plusButton:hover {
-  color: #1d1d20 !important;
-  background: rgba(22, 100, 255, 0.06) !important;
-  border: 1px solid !important;
-  border-color: rgba(22, 100, 255, 0.11) !important;
-}
 .tableExpandBox {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
-
-  padding: 0 65px 0 40px;
+  padding: 0 0 0 33px;
   color: #1d1d20;
   font-size: 15px;
+
+  & > div {
+    padding: 0 16px;
+  }
+
+  .index {
+    width: calc((100% + 32px + 33px) / 5);
+  }
+
+  .tensorBoard {
+    width: calc((100% + 32px + 33px) / 5);
+  }
+
+  .description {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+
+  .status {
+    width: 200px;
+  }
+
+  .operation {
+    width: 284px;
+  }
+}
+.tableExpandBoxContent {
+  height: 45px;
+  background-color: #fff;
+  border: 1px solid #eaeaea;
+
+  & + & {
+    border-top: none;
+  }
 }
 
 .statusBox {
   display: flex;
   align-items: center;
+  width: 200px;
 
   .statusIcon {
     visibility: hidden;

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

@@ -87,20 +87,8 @@
 }
 .plusButton {
   margin: 0 18px 0 20px;
-  color: #1d1d20;
-  font-size: 14px;
-  font-family: 'Alibaba';
-  background: rgba(22, 100, 255, 0.06);
-  border: 1px solid;
-  border-color: rgba(22, 100, 255, 0.11);
-  border-radius: 4px;
-}
-.plusButton:hover {
-  color: #1d1d20 !important;
-  background: rgba(22, 100, 255, 0.06) !important;
-  border: 1px solid !important;
-  border-color: rgba(22, 100, 255, 0.11) !important;
 }
+
 .datasetCneterBox {
   display: flex;
   justify-content: space-between;
@@ -202,6 +190,7 @@
     flex: 1;
     flex-direction: column;
     height: 100%;
+    overflow-y: auto;
     padding: 22px 30px 26px 30px;
     background: #ffffff;
     box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
@@ -219,67 +208,79 @@
       flex: 1;
       flex-wrap: wrap;
       align-content: flex-start;
-      width: 102%;
+      width: 100%;
       .dataItem {
         position: relative;
-        width: 23.5%;
+<<<<<<< HEAD
+        width: 23.8%;
         height:164px;
         background:#ffffff;
         border:1px solid;
         border-color:#eaeaea;
         border-radius:4px;
+=======
+        width: 23.5%;
+        height: 164px;
+>>>>>>> 708a5facb090bd542e06a0356466fa159720a223
         margin: 0 20px 25px 0;
+        background: #ffffff;
+        border: 1px solid;
+        border-color: #eaeaea;
+        border-radius: 4px;
         cursor: pointer;
         .itemText {
           position: absolute;
           top: 20px;
           left: 20px;
-          background: linear-gradient(to right ,rgba(22, 100, 255,0.6) 0,rgba(22, 100, 255,0) 100%);
           height: 6px;
-          line-height: 0px;
-          color:#1d1d20;
-          font-size:16px;
+          color: #1d1d20;
+          font-size: 16px;
           font-family: 'Alibaba';
+          line-height: 0px;
+          background: linear-gradient(
+            to right,
+            rgba(22, 100, 255, 0.6) 0,
+            rgba(22, 100, 255, 0) 100%
+          );
         }
-        .itemDescripition{
+        .itemDescripition {
           position: absolute;
           top: 57px;
           left: 20px;
+          display: -webkit-box;
           padding-right: 28px;
-          color:#575757;
-          font-size:14px;
-          word-break: break-all;
           overflow: hidden;
-          display: -webkit-box;
+          color: #575757;
+          font-size: 14px;
+          word-break: break-all;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
         }
         .itemTime {
           position: absolute;
-          display: flex;
-          align-items: center;
           bottom: 22px;
           left: 20px;
+          display: flex;
+          align-items: center;
           color: #808080;
           font-size: 13px;
         }
         .itemIcon {
           position: absolute;
-          display: flex;
-          align-items: center;
           right: 20px;
           bottom: 22px;
+          display: flex;
+          align-items: center;
           color: #808080;
           font-size: 13px;
         }
       }
-      .dataItem:hover{
-        border-color: #1664FF;
-        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1)
-       
+      .dataItem:hover {
+        border-color: #1664ff;
+        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
       }
-      .dataItem:hover .itemText{
-        color: #1664FF;
+      .dataItem:hover .itemText {
+        color: #1664ff;
       }
     }
   }
@@ -290,9 +291,9 @@
       width: 825px;
       padding: 20px 67px;
       background-image: url(/assets/images/modal-back.png);
-      background-repeat:no-repeat;
-      background-size:100%;
+      background-repeat: no-repeat;
       background-position: top center;
+      background-size: 100%;
       border-radius: 21px;
     }
     .ant-modal-header {

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

@@ -1,4 +1,5 @@
 import { getAccessToken } from '@/access';
+import KFIcon from '@/components/KFIcon';
 import {
   addModelsVersionDetail,
   deleteModelVersion,
@@ -7,12 +8,7 @@ import {
   getModelVersionsById,
 } from '@/services/dataset/index.js';
 import { downLoadZip } from '@/utils/downloadfile';
-import {
-  DeleteOutlined,
-  DownloadOutlined,
-  PlusCircleOutlined,
-  UploadOutlined,
-} from '@ant-design/icons';
+import { UploadOutlined } from '@ant-design/icons';
 import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, message } from 'antd';
 import moment from 'moment';
 import { useEffect, useRef, useState } from 'react';
@@ -201,7 +197,7 @@ const Dataset = () => {
           type="link"
           size="small"
           key="download"
-          icon={<DownloadOutlined />}
+          icon={<KFIcon type="icon-xiazai" />}
           onClick={(e) => downloadAlone(e, record)}
         >
           下载
@@ -225,9 +221,9 @@ const Dataset = () => {
       <div className={Styles.datasetIntroTopBox}>
         <span style={{ color: '#1d1d20', fontSize: '20px' }}>{datasetDetailObj.name}</span>
         <div className={Styles.smallTagBox}>
+          <div className={Styles.tagItem}>模型 id：{datasetDetailObj.id}</div>
           <div className={Styles.tagItem}>{datasetDetailObj.data_tag || '...'}</div>
           <div className={Styles.tagItem}>{datasetDetailObj.data_type}</div>
-          {/* <div className={Styles.tagItem}>English</div> */}
         </div>
       </div>
       <div className={Styles.datasetIntroCneterBox}>
@@ -255,10 +251,10 @@ const Dataset = () => {
                     options={versionList}
                   />
                   <Button
-                    type="primary"
+                    type="default"
                     className={Styles.plusButton}
                     onClick={showModal}
-                    icon={<PlusCircleOutlined style={{ color: '#1664ff' }} />}
+                    icon={<KFIcon type="icon-xinjian2" />}
                   >
                     创建新版本
                   </Button>
@@ -267,21 +263,21 @@ const Dataset = () => {
                   style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                 >
                   <Button
-                    type="primary"
+                    type="default"
                     className={Styles.plusButton}
                     style={{ margin: '0 20px 0 0' }}
                     onClick={deleteDataset}
-                    icon={<DeleteOutlined style={{ color: '#1664ff' }} />}
+                    icon={<KFIcon type="icon-shanchu" />}
                   >
                     删除
                   </Button>
                   <Button
-                    type="primary"
+                    type="default"
                     className={Styles.plusButton}
                     disabled={!version}
                     style={{ margin: '0 20px 0 0' }}
                     onClick={handleExport}
-                    icon={<DownloadOutlined style={{ color: '#1664ff' }} />}
+                    icon={<KFIcon type="icon-xiazai" />}
                   >
                     下载
                   </Button>

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

@@ -74,6 +74,7 @@ const Pipeline = () => {
   };
   const pageOption = useRef({ page: 1, size: 10 });
   const paginationProps = {
+    showSizeChanger: true,
     showQuickJumper: true,
     showTotal: () => `共${total}条`,
     total: total,
@@ -113,7 +114,7 @@ const Pipeline = () => {
       title: '序号',
       dataIndex: 'index',
       key: 'index',
-      width: 140,
+      width: 120,
       align: 'center',
       render(text, record, index) {
         return <span>{(pageOption.current.page - 1) * 10 + index + 1}</span>;
@@ -240,12 +241,7 @@ const Pipeline = () => {
   return (
     <div>
       <div className={Styles.pipelineTopBox}>
-        <Button
-          type="primary"
-          className={Styles.plusButton}
-          onClick={showModal}
-          icon={<KFIcon type="icon-xinjian2" />}
-        >
+        <Button type="default" onClick={showModal} icon={<KFIcon type="icon-xinjian2" />}>
           新建流水线
         </Button>
       </div>
@@ -302,7 +298,12 @@ const Pipeline = () => {
               },
             ]}
           >
-            <Input placeholder="请输入流水线描述" showCount maxLength={128} />
+            <TextArea
+              autoSize={{ minRows: 2, maxRows: 5 }}
+              placeholder="请输入流水线描述"
+              showCount
+              maxLength={128}
+            />
           </Form.Item>
         </Form>
       </Modal>

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

@@ -9,30 +9,16 @@
   background-image: url(/assets/images/pipeline-back.png);
   background-size: 100% 100%;
 }
-.plusButton {
-  color: #1d1d20;
-  font-size: 14px;
-  font-family: 'Alibaba';
-  background: rgba(22, 100, 255, 0.06);
-  border: 1px solid;
-  border-color: rgba(22, 100, 255, 0.11);
-  border-radius: 4px;
-}
-.plusButton:hover {
-  color: #1d1d20 !important;
-  background: rgba(22, 100, 255, 0.06) !important;
-  border: 1px solid !important;
-  border-color: rgba(22, 100, 255, 0.11) !important;
-}
+
 .modal {
   :global {
     .ant-modal-content {
       width: 825px;
       padding: 20px 67px;
       background-image: url(/assets/images/modal-back.png);
-      background-repeat:no-repeat;
-      background-size:100%;
+      background-repeat: no-repeat;
       background-position: top center;
+      background-size: 100%;
       border-radius: 21px;
     }
     .ant-modal-header {
@@ -62,6 +48,5 @@
     .ant-btn-primary {
       background: #1664ff;
     }
-    
   }
 }

react-ui/src/utils/ui.tsx

@@ -17,7 +17,7 @@ export function modalConfirm({ title, content, onOk, ...rest }: ModalFuncProps)
           style={{ width: '120px', marginBottom: '24px' }}
           alt=""
         />
-        <div style={{ color: themes.textColor, fontSize: '16px' }}>{title}</div>
+        <div style={{ color: themes.textColor, fontSize: '16px', fontWeight: 500 }}>{title}</div>
       </div>
     ),
     content: content && <div style={{ color: themes.textColor, fontSize: '15px' }}>{content}</div>,