diff --git a/react-ui/public/assets/images/modal-back.png b/react-ui/public/assets/images/modal-back.png
new file mode 100644
index 00000000..883b277f
Binary files /dev/null and b/react-ui/public/assets/images/modal-back.png differ
diff --git a/react-ui/src/components/KFModal/index.tsx b/react-ui/src/components/KFModal/index.tsx
index 2ce5907b..58de7ad6 100644
--- a/react-ui/src/components/KFModal/index.tsx
+++ b/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={}
- closeIcon={}
>
{children}
diff --git a/react-ui/src/global.less b/react-ui/src/global.less
index df9fc389..29b900b5 100644
--- a/react-ui/src/global.less
+++ b/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;
diff --git a/react-ui/src/pages/Dataset/index.less b/react-ui/src/pages/Dataset/index.less
index 320ca827..2ae746ba 100644
--- a/react-ui/src/pages/Dataset/index.less
+++ b/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 {
diff --git a/react-ui/src/pages/Dataset/personalData.jsx b/react-ui/src/pages/Dataset/personalData.jsx
index ac04fd40..0bc82b26 100644
--- a/react-ui/src/pages/Dataset/personalData.jsx
+++ b/react-ui/src/pages/Dataset/personalData.jsx
@@ -311,30 +311,27 @@ const PublicData = (React.FC = () => {
-
+
-
+
{
]
}
>
-
+
diff --git a/react-ui/src/pages/Experiment/experimentText/index.jsx b/react-ui/src/pages/Experiment/experimentText/index.jsx
index 15fd0f51..18e525b6 100644
--- a/react-ui/src/pages/Experiment/experimentText/index.jsx
+++ b/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);
diff --git a/react-ui/src/pages/Model/index.less b/react-ui/src/pages/Model/index.less
index 857d0a7c..c87b5c62 100644
--- a/react-ui/src/pages/Model/index.less
+++ b/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 {
diff --git a/react-ui/src/pages/Model/personalData.jsx b/react-ui/src/pages/Model/personalData.jsx
index 8a52136e..2253e193 100644
--- a/react-ui/src/pages/Model/personalData.jsx
+++ b/react-ui/src/pages/Model/personalData.jsx
@@ -314,31 +314,27 @@ const PublicData = () => {
-
+
-
+
diff --git a/react-ui/src/pages/Pipeline/index.jsx b/react-ui/src/pages/Pipeline/index.jsx
index 606f9e5b..23fefe27 100644
--- a/react-ui/src/pages/Pipeline/index.jsx
+++ b/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 {(pageOption.current.page - 1) * 10 + index + 1};
},
@@ -143,6 +144,7 @@ const Pipeline = () => {
{
title: '操作',
key: 'action',
+ width: 320,
render: (_, record) => (
@@ -275,30 +277,26 @@ const Pipeline = () => {
-
+
-
+
diff --git a/react-ui/src/pages/Pipeline/index.less b/react-ui/src/pages/Pipeline/index.less
index f6ee1e80..29f5ba39 100644
--- a/react-ui/src/pages/Pipeline/index.less
+++ b/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 {