diff --git a/react-ui/src/global.less b/react-ui/src/global.less
index cdc68cf3..939a99c1 100644
--- a/react-ui/src/global.less
+++ b/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;
}
diff --git a/react-ui/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/datasetIntro.jsx
index bd7b1604..d30632e8 100644
--- a/react-ui/src/pages/Dataset/datasetIntro.jsx
+++ b/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={}
+ icon={}
onClick={(e) => downloadAlone(e, record)}
>
下载
@@ -227,9 +223,9 @@ const Dataset = () => {
{datasetDetailObj.name}
+
数据集 id:{datasetDetailObj.id}
{datasetDetailObj.data_tag || '...'}
{datasetDetailObj.data_type}
- {/*
English
*/}
@@ -257,10 +253,10 @@ const Dataset = () => {
options={versionList}
/>
}
+ icon={}
>
创建新版本
@@ -269,21 +265,21 @@ const Dataset = () => {
style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
>
}
+ icon={}
>
删除
}
+ icon={}
>
下载
diff --git a/react-ui/src/pages/Dataset/index.less b/react-ui/src/pages/Dataset/index.less
index 2ff0b580..338105f0 100644
--- a/react-ui/src/pages/Dataset/index.less
+++ b/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 {
diff --git a/react-ui/src/pages/Dataset/publicData.jsx b/react-ui/src/pages/Dataset/publicData.jsx
index 298e51f4..32451ad8 100644
--- a/react-ui/src/pages/Dataset/publicData.jsx
+++ b/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 = () => {
>
);
-});
+};
export default PublicData;
diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx
index 2eead78c..b90fea0a 100644
--- a/react-ui/src/pages/Experiment/index.jsx
+++ b/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) => {text}
,
+ width: '20%',
},
{
title: '关联流水线名称',
dataIndex: 'workflow_name',
key: 'workflow_name',
render: (text, record) => routeToEdit(e, record)}>{text},
+ 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 (
- {/*
- }>
- 新建实验
-
-
*/}
- }
- >
+ }>
新建实验
@@ -400,12 +395,14 @@ function Experiment() {
{experimentInList && experimentInList.length > 0 ? (
-
序号
-
TensorBoard
-
运行时长
-
开始时间
-
状态
-
操作
+
序号
+
可视化
+
+
状态
+
操作
) : (
''
@@ -415,17 +412,16 @@ function Experiment() {
? experimentInList.map((item, index) => (
-
routerToText(e, item, record)}>
+ routerToText(e, item, record)}
+ >
{index + 1}
-
+
{item.nodes_result?.tensorboard_log ? (
-
- {item.finish_time
- ? elapsedTime(new Date(item.create_time), new Date(item.finish_time))
- : elapsedTime(new Date(item.create_time), new Date())}
-
-
- {momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}
+
+
+ {item.finish_time
+ ? elapsedTime(new Date(item.create_time), new Date(item.finish_time))
+ : elapsedTime(new Date(item.create_time), new Date())}
+
+
+ {momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}
+
-
+
-
+