style: 修改自动学习样式

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'; // 导入你的路由配置

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() {

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;
       }

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) => (
         <div>

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;
         }
       }

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,
+            },
           },
         ],
       },