diff --git a/react-ui/src/components/KFBreadcrumb/index.tsx b/react-ui/src/components/KFBreadcrumb/index.tsx index c6322025..dc87efc2 100644 --- a/react-ui/src/components/KFBreadcrumb/index.tsx +++ b/react-ui/src/components/KFBreadcrumb/index.tsx @@ -1,3 +1,9 @@ +/* + * @Author: 赵伟 + * @Date: 2024-09-02 08:42:57 + * @Description: 自定义面包屑,暂时不用,使用了 ProBreadcrumb + */ + import { Breadcrumb, type BreadcrumbProps } from 'antd'; import { Link, matchPath, useLocation } from 'umi'; // import routes from '../../../config/config'; // 导入你的路由配置 diff --git a/react-ui/src/pages/Application/index.tsx b/react-ui/src/pages/Application/index.tsx index 65a1efae..20147094 100644 --- a/react-ui/src/pages/Application/index.tsx +++ b/react-ui/src/pages/Application/index.tsx @@ -1,3 +1,9 @@ +/* + * @Author: 赵伟 + * @Date: 2024-09-02 08:42:57 + * @Description: 应用开发 + */ + import IframePage, { IframePageType } from '@/components/IFramePage'; function Application() { diff --git a/react-ui/src/pages/AutoML/Create/index.less b/react-ui/src/pages/AutoML/Create/index.less index ca173288..7c88312e 100644 --- a/react-ui/src/pages/AutoML/Create/index.less +++ b/react-ui/src/pages/AutoML/Create/index.less @@ -32,13 +32,21 @@ } } - .ant-btn.ant-btn-icon-only .anticon { + .ant-btn-variant-text:disabled { + color: rgba(0, 0, 0, 0.25); + } + + .ant-btn-variant-text { color: #565658; + } + + .ant-btn.ant-btn-icon-only .anticon { font-size: 20px; } .anticon-question-circle { margin-top: -12px; + margin-left: 1px !important; color: @text-color-tertiary !important; font-size: 12px !important; } diff --git a/react-ui/src/pages/AutoML/components/AutoMLTable/index.tsx b/react-ui/src/pages/AutoML/components/AutoMLTable/index.tsx index e4e0f00f..6fd78790 100644 --- a/react-ui/src/pages/AutoML/components/AutoMLTable/index.tsx +++ b/react-ui/src/pages/AutoML/components/AutoMLTable/index.tsx @@ -217,7 +217,7 @@ function AutoMLTable() { { title: '操作', dataIndex: 'operation', - width: 400, + width: 250, key: 'operation', render: (_: any, record: ServiceData) => (
diff --git a/react-ui/src/pages/AutoML/components/ConfigInfo/index.less b/react-ui/src/pages/AutoML/components/ConfigInfo/index.less index a51e7ddb..babbac65 100644 --- a/react-ui/src/pages/AutoML/components/ConfigInfo/index.less +++ b/react-ui/src/pages/AutoML/components/ConfigInfo/index.less @@ -1,5 +1,6 @@ .config-info { - width: 100%; + flex: 1; + min-width: 0; border: 1px solid @border-color-base; border-radius: 4px; @@ -11,10 +12,11 @@ :global { .kf-basic-info { - gap: 15px 40px; + gap: 15px; width: 100%; &__item { + width: calc((100% - 15px) / 2); &__label { font-size: @font-size; text-align: left; @@ -24,6 +26,7 @@ } } &__value { + min-width: 0; font-size: @font-size; } } diff --git a/react-ui/src/pages/AutoML/components/StatusChart/index.tsx b/react-ui/src/pages/AutoML/components/StatusChart/index.tsx index db9a3cdd..2c8b8aa4 100644 --- a/react-ui/src/pages/AutoML/components/StatusChart/index.tsx +++ b/react-ui/src/pages/AutoML/components/StatusChart/index.tsx @@ -4,6 +4,8 @@ import React, { useEffect, useRef } from 'react'; import ConfigTitle from '../ConfigTitle'; import styles from './index.less'; +const colors = ['#c73131', '#6ac21d', '#1664ff', '#f0864d', '#8a8a8a']; + const color1 = new echarts.graphic.LinearGradient( 0, 0, @@ -62,7 +64,7 @@ const color5 = new echarts.graphic.LinearGradient( false, ); -const color6 = new echarts.graphic.LinearGradient( +const circleBgColor = new echarts.graphic.LinearGradient( 0, 0, 0, @@ -130,16 +132,48 @@ function StatusChart({ chartData, style }: ExperimentChartProps) { itemGap: 20, height: 100, }, - color: [color1, color2, color3, color4, color5], + color: colors, //[color1, color2, color3, color4, color5], series: [ { type: 'pie', - radius: ['70%', '80%'], + radius: '80%', + center: ['30%', '50%'], + avoidLabelOverlap: false, + label: { + show: false, + }, + tooltip: { + show: false, + }, + emphasis: { + label: { + show: false, + }, + disabled: true, + }, + animation: false, + labelLine: { + show: false, + }, + data: [ + { + value: 100, + itemStyle: { + color: circleBgColor, + borderColor: 'rgba(22, 100, 255, 0.08)', + borderWidth: 1, + }, + }, + ], + }, + { + type: 'pie', + radius: ['50%', '70%'], center: ['30%', '50%'], avoidLabelOverlap: false, padAngle: 3, itemStyle: { - borderRadius: 3, + borderRadius: 0, }, minAngle: 5, label: { @@ -163,7 +197,7 @@ function StatusChart({ chartData, style }: ExperimentChartProps) { }, { type: 'pie', - radius: '60%', + radius: '40%', center: ['30%', '50%'], avoidLabelOverlap: false, label: { @@ -185,7 +219,11 @@ function StatusChart({ chartData, style }: ExperimentChartProps) { data: [ { value: 100, - itemStyle: { color: color6, borderColor: 'rgba(22, 100, 255, 0.08)', borderWidth: 1 }, + itemStyle: { + color: circleBgColor, + borderColor: 'rgba(22, 100, 255, 0.08)', + borderWidth: 1, + }, }, ], },