merge

react-ui/src/global.less

@@ -1,12 +1,9 @@
-@import '@/styles/theme.less';
-
 html,
 body,
 #root {
   height: 100%;
   margin: 0;
   padding: 0;
-  overflow-y: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';
@@ -41,12 +38,10 @@ a {
   color: #1664ff;
 }
 .ant-pro-layout .ant-pro-layout-content {
-  padding: 0 10px 10px;
-  overflow-y: hidden;
-  background-color: @background-color;
+  padding: 10px;
 }
 .ant-pro-layout .ant-pro-layout-bg-list {
-  background: @background-color;
+  background: #f9fafb;
 }
 .ant-table-wrapper .ant-table-thead > tr > th {
   background-color: #fff;
@@ -56,27 +51,34 @@ a {
 }
 .ant-menu-light .ant-menu-item-selected {
   background: rgba(197, 232, 255, 0.8) !important;
+  
+}
+.ant-menu-light .ant-menu-item-selected .ant-pro-base-menu-inline-item-text{
+  color:#1664ff;
 }
 .ant-pro-layout .ant-pro-sider .ant-layout-sider-children {
   background: #f2f5f7;
 }
-.ant-pro-base-menu-inline-item-title .ant-pro-base-menu-inline-item-text {
-  color: #1d1d20;
-  font-size: 16px;
+.ant-pro-base-menu-inline-item-title .ant-pro-base-menu-inline-item-text{
+  color:#1d1d20;
+font-size:16px;
 }
-.ant-pro-layout .ant-pro-sider-menu {
+// .ant-menu-light .ant-menu-item-selected{
+//   color:#1664ff;
+// }
+.ant-pro-layout .ant-pro-sider-menu{
   padding-top: 40px;
 }
-.ant-pro-global-header-logo-mix {
-  width: 257px;
+.ant-pro-global-header-logo-mix{
   height: 75px;
-  margin-left: -16px;
-  padding-left: 28px;
-  background: #f2f5f7;
   border-bottom: 1px solid rgba(233, 237, 240, 1);
+  margin-left: -16px;
+  width: 257px;
+  background:#f2f5f7;
   border-top-right-radius: 20px;
+  padding-left: 28px;
 }
-.ant-pro-layout .ant-pro-sider .ant-layout-sider-children {
+.ant-pro-layout .ant-pro-sider .ant-layout-sider-children{
   border-right: unset;
   border-bottom-right-radius: 20px;
 }
@@ -85,16 +87,21 @@ a {
   background: #f2f5f7;
   border-radius: 0px 20px 20px 0px;
 }
-
-.ant-drawer .ant-drawer-body {
+.ant-pro-layout .ant-pro-layout-content {
+  background-color: transparent;
+}
+.ant-drawer .ant-drawer-body{
   padding: 0;
 }
-.ant-drawer .ant-drawer-body .ant-row {
+.ant-drawer .ant-drawer-body .ant-row{
   padding: 0 24px;
 }
-.ant-drawer .ant-drawer-body .ant-form-item {
+.ant-drawer .ant-drawer-body .ant-form-item{
   margin-bottom: 20px;
 }
+.ant-menu .ant-menu-submenu-title .anticon {
+  font-size: 16px;
+}
 .ant-table-wrapper .ant-table-pagination.ant-pagination {
   margin: 0;
   padding: 21px 16px;
@@ -110,10 +117,9 @@ a {
   height: 94vh;
 }
 .ant-pro-layout .ant-pro-layout-container {
-  height: 100vh;
-  overflow-y: hidden;
+  height: 98vh;
 }
-.ant-modal-confirm .ant-modal-confirm-paragraph {
+.ant-modal-confirm .ant-modal-confirm-paragraph{
   margin: 54px 0 auto;
   text-align: center;
 }
@@ -124,35 +130,36 @@ a {
   margin-top: 30px;
   text-align: center;
 }
-.ant-modal-confirm-btns .ant-btn-default {
-  width: 110px;
-  height: 40px;
-  margin-right: 10px;
-  color: #1d1d20;
-  font-size: 18px;
-  background: rgba(22, 100, 255, 0.06);
-  border-color: transparent;
-  border-radius: 10px;
+.ant-modal-confirm-btns .ant-btn-default{
+  width:110px;
+height:40px;
+background:rgba(22, 100, 255, 0.06);
+border-radius:10px;
+color:#1d1d20;
+font-size:18px;
+margin-right: 10px;
+border-color: transparent;
 }
 .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: 110px;
-  height: 40px;
+.ant-modal-confirm-btns .ant-btn-primary{
+  width:110px;
+  height:40px;
+  background:#1664ff;
+  border-radius:10px;
   font-size: 18px;
-  background: #1664ff;
-  border-radius: 10px;
 }
-.ant-modal .ant-input-affix-wrapper {
+.ant-modal .ant-input-affix-wrapper{
   height: 46px;
   padding: 1px 11px;
 }
-.ant-modal .ant-select-single {
+.ant-modal  .ant-select-single{
   height: 46px;
+  
 }
-.ant-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+.ant-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
   line-height: 46px;
 }
 .ant-modal .ant-modal-close-x {
@@ -169,14 +176,13 @@ a {
 .ant-modal .ant-modal-content {
   padding: 0;
 }
-.ant-modal-confirm-body-wrapper {
-  height: 303px;
-  background-image: url(/assets/images/modal-back.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-  background-size: 100%;
-  border-radius: 21px;
-  border-radius: 0;
+.ant-modal-confirm-body-wrapper{
+height:303px;
+background-image: url(/assets/images/modal-back.png);
+background-repeat:no-repeat;
+background-size:100%;
+background-position: top center;
+border-radius: 0;
 }
 .ant-modal .ant-modal-content {
   border-radius: 20px;
@@ -204,6 +210,17 @@ a {
   border-radius: 6px;
 }
 
+.ant-tabs {
+  .ant-tabs-nav::before,
+  div > .ant-tabs-nav::before {
+    border: none;
+  }
+
+  .ant-tabs-nav {
+    margin-bottom: 0;
+  }
+}
+
 // ::-webkit-scrollbar-button {
 //   background: #97a1bd;
 // }

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

@@ -7,6 +7,7 @@
   padding-right: 30px;
   background-image: url(/assets/images/pipeline-back.png);
   background-size: 100% 100%;
+  font-family: 'Alibaba';
 }
 .datasetIntroTopBox {
   display: flex;
@@ -38,6 +39,7 @@
   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;
@@ -68,6 +70,7 @@
 .datasetBox {
   font-family: 'Alibaba';
   background: #f9fafb;
+  
   :global {
     .ant-tabs-top > .ant-tabs-nav {
       margin: 0;
@@ -117,6 +120,7 @@
     margin-right: 10px;
     padding-top: 15px;
     background: #ffffff;
+    font-family: 'Alibaba';
     box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
     .custTab {
       display: flex;
@@ -136,6 +140,7 @@
       padding: 15px 20px;
       overflow-x: hidden;
       overflow-y: auto;
+      font-family: 'Alibaba';
       .itemTitle {
         margin-bottom: 15px;
         color: #1d1d20;
@@ -205,6 +210,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    font-family: 'Alibaba';
     height: 100%;
     padding: 22px 30px 26px 30px;
     background: #ffffff;
@@ -223,6 +229,7 @@
       flex: 1;
       flex-wrap: wrap;
       align-content: flex-start;
+      font-family: 'Alibaba';
       width: 103%;
       .dataItem {
         position: relative;
@@ -238,8 +245,12 @@
           position: absolute;
           top: 20px;
           left: 20px;
-          color: #1d1d20;
-          font-size: 16px;
+          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;
+
         }
         .itemDescripition{
           position: absolute;
@@ -256,6 +267,8 @@
         }
         .itemTime {
           position: absolute;
+          display: flex;
+          align-items: center;
           bottom: 22px;
           left: 20px;
           color: #808080;
@@ -263,12 +276,22 @@
         }
         .itemIcon {
           position: absolute;
+          display: flex;
+          align-items: center;
           right: 20px;
           bottom: 22px;
           color: #808080;
           font-size: 13px;
         }
       }
+      .dataItem:hover{
+        border-color: #1664FF;
+        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2)
+       
+      }
+      .dataItem:hover .itemText{
+        color: #1664FF;
+      }
     }
   }
 }

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

@@ -1,4 +1,6 @@
 import { getAccessToken } from '@/access';
+import clock from '@/assets/img/clock.png';
+import creatByImg from '@/assets/img/creatBy.png';
 import { addDatesetAndVesion, getAssetIcon, getDatasetList } from '@/services/dataset/index.js';
 import { getDictSelectOption } from '@/services/system/dict';
 import { PlusCircleOutlined, UploadOutlined } from '@ant-design/icons';
@@ -40,7 +42,7 @@ const PublicData = (React.FC = () => {
   };
   const [queryFlow, setQueryFlow] = useState({
     page: 0,
-    size: 10,
+    size: 20,
     name: null,
     available_range: 0,
   });
@@ -149,6 +151,11 @@ const PublicData = (React.FC = () => {
   const onFinishFailed = (errorInfo) => {
     console.log('Failed:', errorInfo);
   };
+  const onPageChange = (pageNum, pageSize) => {
+    console.log(pageNum, pageSize);
+    setQueryFlow({ ...queryFlow, page: pageNum - 1, size: pageSize });
+    getDatasetlist({ ...queryFlow, page: pageNum - 1, size: pageSize });
+  };
   useEffect(() => {
     getDictSelectOption('available_cluster').then((data) => {
       setClusterOptions(data);
@@ -268,17 +275,18 @@ const PublicData = (React.FC = () => {
               ? datasetList.map((item) => {
                   return (
                     <div className={Styles.dataItem} onClick={(e) => routeToIntro(e, item)}>
-                      <div className={Styles.itemText}>{item.name}</div>
+                      <span className={Styles.itemText}>{item.name}</span>
                       <div className={Styles.itemDescripition}>{item.description}</div>
                       <div className={Styles.itemTime}>
-                        <span>{item.create_by}</span>
-                      </div>
-                      <div className={Styles.itemIcon}>
                         <img
-                          style={{ width: '17px', marginRight: '3px' }}
-                          src={`/assets/images/upload-icon.png`}
+                          style={{ width: '17px', marginRight: '6px' }}
+                          src={creatByImg}
                           alt=""
                         />
+                        <span>{item.create_by}</span>
+                      </div>
+                      <div className={Styles.itemIcon}>
+                        <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" />
                         <span>最近更新: {moment(item.update_time).format('YYYY-MM-DD')}</span>
                       </div>
                     </div>
@@ -287,7 +295,14 @@ const PublicData = (React.FC = () => {
               : ''}
             {/* <Select.Option value="demo">Demo</Select.Option> */}
           </div>
-          <Pagination size="small" total={total} showSizeChanger showQuickJumper />
+          <Pagination
+            total={total}
+            showSizeChanger
+            defaultPageSize={20}
+            pageSizeOptions={[20, 40, 60, 80, 100]}
+            showQuickJumper
+            onChange={onPageChange}
+          />
         </div>
       </div>
       <Modal

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

@@ -1,3 +1,5 @@
+import clock from '@/assets/img/clock.png';
+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';
@@ -109,6 +111,11 @@ const PublicData = (React.FC = () => {
   const onFinishFailed = (errorInfo) => {
     console.log('Failed:', errorInfo);
   };
+  const onPageChange = (pageNum, pageSize) => {
+    console.log(pageNum, pageSize);
+    setQueryFlow({ ...queryFlow, page: pageNum - 1, size: pageSize });
+    getDatasetlist({ ...queryFlow, page: pageNum - 1, size: pageSize });
+  };
   useEffect(() => {
     getAssetIconList(iconParams);
     getDatasetlist(queryFlow);
@@ -217,17 +224,19 @@ const PublicData = (React.FC = () => {
               ? datasetList.map((item) => {
                   return (
                     <div className={Styles.dataItem} onClick={(e) => routeToIntro(e, item)}>
-                      <div className={Styles.itemText}>{item.name}</div>
+                      <span className={Styles.itemText}>{item.name}</span>
+                      <div className={Styles.itemDescripition}>{item.description}</div>
                       <div className={Styles.itemTime}>
-                        <span>最近更新: {moment(item.update_time).format('YYYY-MM-DD')}</span>
-                      </div>
-                      <div className={Styles.itemIcon}>
                         <img
-                          style={{ width: '17px', marginRight: '3px' }}
-                          src={`/assets/images/upload-icon.png`}
+                          style={{ width: '17px', marginRight: '6px' }}
+                          src={creatByImg}
                           alt=""
                         />
-                        <span>1582</span>
+                        <span>{item.create_by}</span>
+                      </div>
+                      <div className={Styles.itemIcon}>
+                        <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" />
+                        <span>最近更新: {moment(item.update_time).format('YYYY-MM-DD')}</span>
                       </div>
                     </div>
                   );
@@ -235,7 +244,14 @@ const PublicData = (React.FC = () => {
               : ''}
             {/* <Select.Option value="demo">Demo</Select.Option> */}
           </div>
-          <Pagination size="small" total={total} showSizeChanger showQuickJumper />
+          <Pagination
+            total={total}
+            showSizeChanger
+            defaultPageSize={20}
+            pageSizeOptions={[20, 40, 60, 80, 100]}
+            showQuickJumper
+            onChange={onPageChange}
+          />
         </div>
       </div>
     </>

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

@@ -222,35 +222,65 @@
       width: 100%;
       .dataItem {
         position: relative;
-        width: 32%;
-        height: 66px;
-        margin: 0 15px 18px 0;
-        background: rgba(128, 128, 128, 0.05);
-        border-radius: 8px;
-        box-shadow: 0px 0px 12px rgba(75, 84, 137, 0.05);
+        width: 23%;
+        height:164px;
+        background:#ffffff;
+        border:1px solid;
+        border-color:#eaeaea;
+        border-radius:4px;
+        margin: 0 20px 25px 0;
         cursor: pointer;
         .itemText {
           position: absolute;
-          top: 10px;
+          top: 20px;
           left: 20px;
-          color: #1d1d20;
-          font-size: 15px;
+          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;
+
+        }
+        .itemDescripition{
+          position: absolute;
+          top: 57px;
+          left: 20px;
+          padding-right: 28px;
+          color:#575757;
+          font-size:14px;
+          word-break: break-all;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .itemTime {
           position: absolute;
-          bottom: 10px;
+          display: flex;
+          align-items: center;
+          bottom: 22px;
           left: 20px;
           color: #808080;
-          font-size: 14px;
+          font-size: 13px;
         }
         .itemIcon {
           position: absolute;
+          display: flex;
+          align-items: center;
           right: 20px;
-          bottom: 10px;
+          bottom: 22px;
           color: #808080;
-          font-size: 14px;
+          font-size: 13px;
         }
       }
+      .dataItem:hover{
+        border-color: #1664FF;
+        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2)
+       
+      }
+      .dataItem:hover .itemText{
+        color: #1664FF;
+      }
     }
   }
 }

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

@@ -1,4 +1,6 @@
 import { getAccessToken } from '@/access';
+import clock from '@/assets/img/clock.png';
+import creatByImg from '@/assets/img/creatBy.png';
 import { addModel, getAssetIcon, getModelList } from '@/services/dataset/index.js';
 import { PlusCircleOutlined, UploadOutlined } from '@ant-design/icons';
 import { Button, Form, Input, Modal, Pagination, Radio, Select, Upload } from 'antd';
@@ -148,6 +150,11 @@ const PublicData = () => {
   const onFinishFailed = (errorInfo) => {
     console.log('Failed:', errorInfo);
   };
+  const onPageChange = (pageNum, pageSize) => {
+    console.log(pageNum, pageSize);
+    setQueryFlow({ ...queryFlow, page: pageNum - 1, size: pageSize });
+    getModelLists({ ...queryFlow, page: pageNum - 1, size: pageSize });
+  };
   useEffect(() => {
     getAssetIconList(iconParams);
     getModelLists(queryFlow);
@@ -271,17 +278,19 @@ const PublicData = () => {
               ? datasetList.map((item) => {
                   return (
                     <div className={Styles.dataItem} onClick={(e) => routeToIntro(e, item)}>
-                      <div className={Styles.itemText}>{item.name}</div>
+                      <span className={Styles.itemText}>{item.name}</span>
+                      <div className={Styles.itemDescripition}>{item.description}</div>
                       <div className={Styles.itemTime}>
-                        <span>最近更新: {moment(item.update_time).format('YYYY-MM-DD')}</span>
-                      </div>
-                      <div className={Styles.itemIcon}>
                         <img
-                          style={{ width: '17px', marginRight: '3px' }}
-                          src={`/assets/images/upload-icon.png`}
+                          style={{ width: '17px', marginRight: '6px' }}
+                          src={creatByImg}
                           alt=""
                         />
-                        <span>1582</span>
+                        <span>{item.create_by}</span>
+                      </div>
+                      <div className={Styles.itemIcon}>
+                        <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" />
+                        <span>最近更新: {moment(item.update_time).format('YYYY-MM-DD')}</span>
                       </div>
                     </div>
                   );
@@ -289,7 +298,14 @@ const PublicData = () => {
               : ''}
             {/* <Select.Option value="demo">Demo</Select.Option> */}
           </div>
-          <Pagination size="small" total={total} showSizeChanger showQuickJumper />
+          <Pagination
+            total={total}
+            showSizeChanger
+            defaultPageSize={20}
+            pageSizeOptions={[20, 40, 60, 80, 100]}
+            showQuickJumper
+            onChange={onPageChange}
+          />
         </div>
       </div>
       <Modal

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

@@ -1,3 +1,5 @@
+import clock from '@/assets/img/clock.png';
+import creatByImg from '@/assets/img/creatBy.png';
 import { getAssetIcon, getModelList } from '@/services/dataset/index.js';
 import { Form, Input, Modal, Pagination, Radio } from 'antd';
 import moment from 'moment';
@@ -110,6 +112,11 @@ const PublicData = () => {
   const onFinishFailed = (errorInfo) => {
     console.log('Failed:', errorInfo);
   };
+  const onPageChange = (pageNum, pageSize) => {
+    console.log(pageNum, pageSize);
+    setQueryFlow({ ...queryFlow, page: pageNum - 1, size: pageSize });
+    getModelLists({ ...queryFlow, page: pageNum - 1, size: pageSize });
+  };
   useEffect(() => {
     getAssetIconList(iconParams);
     getModelLists(queryFlow);
@@ -218,17 +225,19 @@ const PublicData = () => {
               ? datasetList.map((item) => {
                   return (
                     <div className={Styles.dataItem} onClick={(e) => routeToIntro(e, item)}>
-                      <div className={Styles.itemText}>{item.name}</div>
+                      <span className={Styles.itemText}>{item.name}</span>
+                      <div className={Styles.itemDescripition}>{item.description}</div>
                       <div className={Styles.itemTime}>
-                        <span>最近更新: {moment(item.update_time).format('YYYY-MM-DD')}</span>
-                      </div>
-                      <div className={Styles.itemIcon}>
                         <img
-                          style={{ width: '17px', marginRight: '3px' }}
-                          src={`/assets/images/upload-icon.png`}
+                          style={{ width: '17px', marginRight: '6px' }}
+                          src={creatByImg}
                           alt=""
                         />
-                        <span>1582</span>
+                        <span>{item.create_by}</span>
+                      </div>
+                      <div className={Styles.itemIcon}>
+                        <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" />
+                        <span>最近更新: {moment(item.update_time).format('YYYY-MM-DD')}</span>
                       </div>
                     </div>
                   );
@@ -236,7 +245,14 @@ const PublicData = () => {
               : ''}
             {/* <Select.Option value="demo">Demo</Select.Option> */}
           </div>
-          <Pagination size="small" total={total} showSizeChanger showQuickJumper />
+          <Pagination
+            total={total}
+            showSizeChanger
+            defaultPageSize={20}
+            pageSizeOptions={[20, 40, 60, 80, 100]}
+            showQuickJumper
+            onChange={onPageChange}
+          />
         </div>
       </div>
       <Modal