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} /> @@ -269,21 +265,21 @@ const Dataset = () => { style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} > 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')} +
-
+
-
+
@@ -267,21 +263,21 @@ const Dataset = () => { style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} > diff --git a/react-ui/src/pages/Pipeline/index.jsx b/react-ui/src/pages/Pipeline/index.jsx index 50206ace..38e25d83 100644 --- a/react-ui/src/pages/Pipeline/index.jsx +++ b/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 {(pageOption.current.page - 1) * 10 + index + 1}; @@ -240,12 +241,7 @@ const Pipeline = () => { return (
-
@@ -302,7 +298,12 @@ const Pipeline = () => { }, ]} > - +