ci4sManagement-cloud/react-ui/src/pages/AutoML/components/CreateForm/TrialConfig.tsx

import SubAreaTitle from '@/components/SubAreaTitle';
import { AutoMLTaskType } from '@/enums';
import { modalConfirm } from '@/utils/ui';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Button, Col, Flex, Form, Input, InputNumber, Radio, Row, Select } from 'antd';
import { classificationMetrics, regressionMetrics } from './ExecuteConfig';
import styles from './index.less';

function TrialConfig() {
  const form = Form.useFormInstance();
  const task_type = Form.useWatch('task_type', form);
  const metrics = Form.useWatch('metrics', form) || [];
  const selectedMetrics = metrics
    .map((item: { name: string; value: number }) => item?.name)
    .filter(Boolean);
  const allMetricsOptions =
    task_type === AutoMLTaskType.Classification ? classificationMetrics : regressionMetrics;
  const metricsOptions = allMetricsOptions.filter((item) => !selectedMetrics.includes(item.label));

  return (
    <>
      <SubAreaTitle
        title="优化指标"
        image={require('@/assets/img/trial-config-icon.png')}
        style={{ marginTop: '20px', marginBottom: '24px' }}
      ></SubAreaTitle>
      <Row gutter={8}>
        <Col span={10}>
          <Form.Item label="指标名称" name="metric_name">
            <Input placeholder="请输入指标名称" maxLength={64} showCount allowClear />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={8}>
        <Col span={10}>
          <Form.Item label="指标权重" tooltip="用户可自定义优化指标的组合">
            <Form.List name="metrics">
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, ...restField }, index) => (
                    <Flex key={key} align="flex-start" className={styles['metrics-weight']}>
                      <Form.Item
                        style={{ flex: 1, marginBottom: 0, minWidth: 0 }}
                        {...restField}
                        name={[name, 'name']}
                        rules={[{ required: true, message: '请选择指标' }]}
                      >
                        <Select
                          allowClear
                          placeholder="请选择指标"
                          popupMatchSelectWidth={false}
                          options={metricsOptions}
                          showSearch
                        />
                      </Form.Item>
                      <span style={{ margin: '0 8px', lineHeight: '46px' }}>:</span>
                      <Form.Item
                        style={{ flex: 1, marginBottom: 0, minWidth: 0 }}
                        {...restField}
                        name={[name, 'value']}
                        rules={[{ required: true, message: '请输入指标权重' }]}
                      >
                        <InputNumber placeholder="请输入指标权重" min={0} precision={0} />
                      </Form.Item>
                      <Flex className={styles['metrics-weight__operation']} align="center">
                        <Button
                          style={{
                            marginRight: '3px',
                          }}
                          shape="circle"
                          size="middle"
                          type="text"
                          icon={<MinusCircleOutlined />}
                          onClick={() => {
                            modalConfirm({
                              title: '确定要删除该指标权重吗?',
                              onOk: () => {
                                remove(name);
                              },
                            });
                          }}
                        ></Button>
                        {index === fields.length - 1 && (
                          <Button
                            shape="circle"
                            size="middle"
                            type="text"
                            onClick={() => add()}
                            icon={<PlusCircleOutlined />}
                          ></Button>
                        )}
                      </Flex>
                    </Flex>
                  ))}
                  {fields.length === 0 && (
                    <Form.Item className={styles['add-weight']}>
                      <Button
                        className={styles['add-weight__button']}
                        color="primary"
                        variant="dashed"
                        onClick={() => add()}
                        block
                        icon={<PlusCircleOutlined />}
                      >
                        添加指标权重
                      </Button>
                    </Form.Item>
                  )}
                </>
              )}
            </Form.List>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={0}>
        <Col span={24}>
          <Form.Item
            label="优化方向"
            name="greater_is_better"
            rules={[{ required: true, message: '请选择优化方向' }]}
            tooltip="指标组合优化的方向，是越大越好还是越小越好。"
          >
            <Radio.Group>
              <Radio value={true}>越大越好</Radio>
              <Radio value={false}>越小越好</Radio>
            </Radio.Group>
          </Form.Item>
        </Col>
      </Row>
    </>
  );
}

export default TrialConfig;