feat: 调整参数类型文案

react-ui/src/app.tsx

@@ -228,6 +228,7 @@ export const antd: RuntimeAntdConfig = (memo) => {
   };
   memo.theme.components.Select = {
     singleItemHeightLG: 46,
+    optionSelectedColor: themes['primaryColor'],
   };
   memo.theme.components.Table = {
     headerBg: 'rgba(242, 244, 247, 0.36)',

react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx

@@ -41,10 +41,7 @@ function BasicInfoItemValue({ value, link, url, ellipsis, classPrefix }: BasicIn
 
   return (
     <div className={myClassName}>
-      <Typography.Text
-        ellipsis={ellipsis ? { tooltip: value } : false}
-        style={{ fontSize: 'inherit' }}
-      >
+      <Typography.Text ellipsis={ellipsis ? { tooltip: value } : false}>
         {component}
       </Typography.Text>
     </div>

react-ui/src/components/DisabledInput/index.less

@@ -1,6 +1,6 @@
 .disabled-input {
   padding: 4px 11px;
-  color: rgba(0, 0, 0, 0.25);
+  color: @text-disabled-color;
   font-size: @font-size-input;
   background-color: rgba(0, 0, 0, 0.04);
   border: 1px solid #d9d9d9;

react-ui/src/components/DisabledInput/index.tsx

@@ -10,9 +10,7 @@ function DisabledInput({ value, valuePropName }: DisabledInputProps) {
   const data = valuePropName ? value[valuePropName] : value;
   return (
     <div className={styles['disabled-input']}>
-      <Typography.Text ellipsis={{ tooltip: data }} style={{ color: 'inherit' }}>
-        {data}
-      </Typography.Text>
+      <Typography.Text ellipsis={{ tooltip: data }}>{data}</Typography.Text>
     </div>
   );
 }

react-ui/src/components/ParameterInput/index.less

@@ -39,7 +39,7 @@
 
   &__placeholder {
     min-height: 22px;
-    color: rgba(0, 0, 0, 0.25);
+    color: @text-placeholder-color;
     font-size: @font-size-input;
     line-height: 1.5714285714285714;
   }

react-ui/src/components/ResourceSelect/index.tsx

@@ -9,7 +9,7 @@ import ResourceSelectorModal, {
   ResourceSelectorResponse,
   ResourceSelectorType,
   selectorTypeConfig,
-} from '@/pages/Pipeline/components/ResourceSelectorModal';
+} from '@/components/ResourceSelectorModal';
 import { openAntdModal } from '@/utils/modal';
 import { Button } from 'antd';
 import { pick } from 'lodash';
@@ -43,8 +43,7 @@ function ResourceSelect({ type, value, onChange, disabled, ...rest }: ResourceSe
       value.name &&
       value.version &&
       value.path &&
-      (type === ResourceSelectorType.Mirror || value.identifier) &&
-      (type === ResourceSelectorType.Mirror || value.owner)
+      (type === ResourceSelectorType.Mirror || (value.identifier && value.owner))
     ) {
       const originResource = pick(value, [
         'activeTab',

react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx → react-ui/src/components/ResourceSelectorModal/index.tsx

@@ -23,8 +23,8 @@ export type ResourceSelectorResponse = {
   name: string; // 数据集\模型\镜像 name
   version: string; // 数据集\模型\镜像版本
   path: string; // 数据集\模型\镜像版本路径
-  identifier: string; // 数据集\模型 identifier，镜像没有这个字段
-  owner: string; // 数据集\模型 owner，镜像没有这个字段
+  identifier: string; // 数据集\模型 identifier，镜像这个字段为空
+  owner: string; // 数据集\模型 owner，镜像这个字段为空
 };
 
 export interface ResourceSelectorModalProps extends Omit<ModalProps, 'onOk'> {

react-ui/src/overrides.less

@@ -261,3 +261,8 @@
     }
   }
 }
+
+.ant-typography {
+  color: inherit;
+  font-size: inherit;
+}

react-ui/src/pages/AutoML/Create/index.less

@@ -33,7 +33,7 @@
       }
 
       .ant-btn-variant-text:disabled {
-        color: rgba(0, 0, 0, 0.25);
+        color: @text-disabled-color;
       }
 
       .ant-btn-variant-text {

react-ui/src/pages/AutoML/components/CopyingText/index.tsx

@@ -9,11 +9,7 @@ export type CopyingTextProps = {
 function CopyingText({ text }: CopyingTextProps) {
   return (
     <div className={styles['copying-text']}>
-      <Typography.Text
-        ellipsis={{ tooltip: text }}
-        style={{ color: 'inherit' }}
-        className={styles['copying-text__text']}
-      >
+      <Typography.Text ellipsis={{ tooltip: text }} className={styles['copying-text__text']}>
         {text}
       </Typography.Text>
       <KFIcon

react-ui/src/pages/Dataset/components/CategoryItem/index.tsx

@@ -33,10 +33,7 @@ function CategoryItem({ resourceType, item, isSelected, onClick }: CategoryItemP
         alt=""
         draggable={false}
       />
-      <Typography.Text
-        ellipsis={{ tooltip: item.name }}
-        style={{ color: 'inherit', marginTop: '4px' }}
-      >
+      <Typography.Text ellipsis={{ tooltip: item.name }} style={{ marginTop: '4px' }}>
         {item.name}
       </Typography.Text>
     </div>

react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx

@@ -203,7 +203,7 @@ function VersionCompareModal({
                   [styles['version-compare__left__text--different']]: isDifferent(key),
                 })}
               >
-                <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
+                <Typography.Text ellipsis={{ tooltip: text }}>
                   {isEmpty(text) ? '--' : text}
                 </Typography.Text>
               </div>
@@ -221,7 +221,7 @@ function VersionCompareModal({
                   [styles['version-compare__right__text--different']]: isDifferent(key),
                 })}
               >
-                <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
+                <Typography.Text ellipsis={{ tooltip: text }}>
                   {isEmpty(text) ? '--' : text}
                 </Typography.Text>
               </div>

react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx

@@ -49,9 +49,7 @@ function VersionSelectorModal({ versions, onOk, ...rest }: VersionSelectorModalP
               onClick={() => handleClick(item.name)}
             >
               <img src={require('@/assets/img/dataset-version.png')} alt="" draggable={false} />
-              <Typography.Text ellipsis={{ tooltip: item.name }} style={{ color: 'inherit' }}>
-                {item.name}
-              </Typography.Text>
+              <Typography.Text ellipsis={{ tooltip: item.name }}>{item.name}</Typography.Text>
             </div>
           );
         })}

react-ui/src/pages/HyperParameter/Create/index.less

@@ -33,7 +33,7 @@
       }
 
       .ant-btn-variant-text:disabled {
-        color: rgba(0, 0, 0, 0.25);
+        color: @text-disabled-color;
       }
 
       .ant-btn-variant-text {

react-ui/src/pages/HyperParameter/Create/index.tsx

@@ -73,16 +73,6 @@ function CreateHyperparameter() {
       };
     });
 
-    // const runParameters = formData['points_to_evaluate'];
-    // for (const item of parameters) {
-    //   const name = item.name;
-    //   const arr = runParameters.filter((item) => isEmpty(item[name]));
-    //   if (arr.length > 0 && arr.length < runParameters.length) {
-    //     message.error(`手动运行参数 ${name} 必须全部填写或者都不填写`);
-    //     return;
-    //   }
-    // }
-
     // 根据后台要求，修改表单数据
     const object = {
       ...formData,

react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx

@@ -10,7 +10,19 @@ import { useComputingResource } from '@/hooks/resource';
 import { isEmpty } from '@/utils';
 import { modalConfirm } from '@/utils/ui';
 import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import { Button, Col, Flex, Form, Input, InputNumber, Radio, Row, Select, Tooltip } from 'antd';
+import {
+  Button,
+  Col,
+  Flex,
+  Form,
+  Input,
+  InputNumber,
+  Radio,
+  Row,
+  Select,
+  Tooltip,
+  Typography,
+} from 'antd';
 import { isEqual } from 'lodash';
 import PopParameterRange from './PopParameterRange';
 import styles from './index.less';
@@ -22,47 +34,58 @@ import {
   type FormParameter,
 } from './utils';
 
-const parameterTooltip = `uniform(-5, -1)
-    在 -5.0 和 -1.0 之间均匀采样浮点数
-    
-    quniform(3.2, 5.4, 0.2)
-    在 3.2 和 5.4 之间均匀采样浮点数，四舍五入到 0.2 的倍数
+const parameterTooltip = `uniform(low, high)
+    在 low 和 high 之间均匀采样浮点数
+
+    quniform(low, high, q)
+    在 low 和 high 之间均匀采样浮点数，四舍五入到 q 的倍数
     
-    loguniform(1e-4, 1e-2)
-    在 0.0001 和 0.01 之间均匀采样浮点数，对数空间采样
+    loguniform(low, high)
+    在 low 和 high 之间均匀采样浮点数，对数空间采样
     
-    qloguniform(1e-4, 1e-1, 5e-5)
-    在 0.0001 和 0.01 之间均匀采样浮点数，对数空间采样并四舍五入到 0.00005 的倍数
+    qloguniform(low, high, q)
+    在 low 和 high 之间均匀采样浮点数，对数空间采样并四舍五入到 q 的倍数
     
-    randn(10, 2)
-    在均值为 10，方差为 2 的正态分布中进行随机浮点数抽样
+    randn(m, s)
+    在均值为 m，方差为 s 的正态分布中进行随机浮点数抽样
     
-    qrandn(10, 2, 0.2)
-    在均值为 10，方差为 2 的正态分布中进行随机浮点数抽样，四舍五入到 0.2 的倍数
+    qrandn(m, s, q)
+    在均值为 m，方差为 s 的正态分布中进行随机浮点数抽样，四舍五入到 q 的倍数
     
-    randint(-9, 15)
-    在 -9（包括）到 15（不包括）之间均匀采样整数
+    randint(low, high)
+    在 low（包括）到 high（不包括）之间均匀采样整数
     
-    qrandint(-21, 12, 3)
-    在 -21（包括）到 12（不包括）之间均匀采样整数，四舍五入到 3 的倍数
+    qrandint(low, high, q)
+    在 low（包括）到 high（不包括）之间均匀采样整数，四舍五入到 q 的倍数（包括 high）
     
-    lograndint(1, 10)
-    在 1（包括）到 10（不包括）之间均匀采样整数，对数空间采样
+    lograndint(low, high)
+    在 low（包括）到 high（不包括）之间对数空间上均匀采样整数
    
-    qlograndint(1, 10, 2)
-    在 1（包括）到 10（不包括）之间均匀采样整数，对数空间采样并四舍五入到 2 的倍数
+    qlograndint(low, high, q)
+    在 low（包括）到 high（不包括）之间对数空间上均匀采样整数,并四舍五入到 q 的倍数
     
-    choice(["a", "b", "c"])
+    choice
     从指定的选项中采样一个选项
     
-    grid([32, 64, 128])
-    对这些值进行网格搜索，每个值都将被采样
+    grid
+    对选项进行网格搜索，每个值都将被采样
 `;
 
+const axParameterTooltip = `fixed
+    固定取值
+
+    range(low, high)
+    在 low 和 high 范围内采样取值
+    
+    choice
+    从指定的选项中采样一个选项
+  `;
+
 function ExecuteConfig() {
   const form = Form.useFormInstance();
   const searchAlgorithm = Form.useWatch('search_alg', form);
   const paramsTypeOptions = searchAlgorithm === 'Ax' ? axParameterOptions : parameterOptions;
+  const paramsTypeTooltip = searchAlgorithm === 'Ax' ? axParameterTooltip : parameterTooltip;
   const [resourceStandardList, filterResourceStandard] = useComputingResource();
 
   const handleSearchAlgorithmChange = (value: string) => {
@@ -117,6 +140,29 @@ function ExecuteConfig() {
         </Col>
       </Row>
 
+      <Row gutter={8}>
+        <Col span={10}>
+          <Form.Item
+            label="镜像"
+            name="image"
+            rules={[
+              {
+                validator: requiredValidator,
+                message: '请选择镜像',
+              },
+            ]}
+            required
+          >
+            <ResourceSelect
+              type={ResourceSelectorType.Mirror}
+              placeholder="请选择镜像"
+              canInput={false}
+              size="large"
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+
       <Row gutter={8}>
         <Col span={10}>
           <Form.Item
@@ -263,7 +309,7 @@ function ExecuteConfig() {
                 <div className={styles['hyper-parameter__header__type']}>
                   参数类型
                   <Tooltip
-                    title={parameterTooltip}
+                    title={paramsTypeTooltip}
                     placement="top"
                     arrow={{ pointAtCenter: true }}
                     overlayClassName={styles['hyper-parameter__header__tooltip']}
@@ -402,9 +448,13 @@ function ExecuteConfig() {
               rules={[
                 {
                   validator: (_, runParameters) => {
-                    const parameters = form.getFieldValue('parameters');
+                    const parameters = form
+                      .getFieldValue('parameters')
+                      .filter(
+                        (item: FormParameter | undefined) => item !== undefined && item !== null,
+                      );
                     for (const item of parameters) {
-                      const name = item.name;
+                      const name = item?.name;
                       const arr = runParameters.filter((item?: Record<string, any>) =>
                         isEmpty(item?.[name]),
                       );
@@ -437,7 +487,11 @@ function ExecuteConfig() {
                           {parameters.map((item: FormParameter) => (
                             <Form.Item
                               key={item.name}
-                              label={item.name}
+                              label={
+                                <Typography.Text ellipsis={{ tooltip: item.name }}>
+                                  {item.name}
+                                </Typography.Text>
+                              }
                               {...restField}
                               labelCol={{ flex: '140px' }}
                               name={[name, item.name]}

react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.less

@@ -18,6 +18,7 @@
     width: 100%;
     min-height: 46px;
     padding: 10px 11px;
+    color: @text-color;
     font-size: @font-size-input-lg;
     line-height: 1.5;
     background-color: white;
@@ -48,6 +49,10 @@
       cursor: not-allowed;
     }
 
+    &&--empty {
+      color: @text-placeholder-color;
+    }
+
     &&--disabled &__icon {
       color: #aaaaaa !important;
     }

react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.tsx

@@ -1,4 +1,5 @@
 import KFIcon from '@/components/KFIcon';
+import { isEmpty } from '@/utils';
 import { Popconfirm, Typography } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useRef, useState } from 'react';
@@ -77,15 +78,15 @@ function PopParameterRange({ type, value, onChange }: ParameterRangeProps) {
         <div
           className={classNames(styles['parameter-range__input'], {
             [styles['parameter-range__input--disabled']]: disabled,
+            [styles['parameter-range__input--empty']]: isEmpty(jsonText),
           })}
           onClick={handleClick}
         >
           <Typography.Text
             ellipsis={{ tooltip: jsonText }}
-            style={{ color: 'inherit' }}
             className={styles['parameter-range__input__text']}
           >
-            {jsonText}
+            {jsonText ?? '请选择'}
           </Typography.Text>
           <KFIcon type="icon-bianji" className={styles['parameter-range__input__icon']} />
         </div>

react-ui/src/pages/HyperParameter/components/CreateForm/index.less

@@ -121,6 +121,14 @@
     padding: 20px 20px 0;
     border: 1px dashed #e0e0e0;
     border-radius: 8px;
+
+    :global {
+      .ant-form-item-label {
+        label {
+          width: calc(100% - 10px);
+        }
+      }
+    }
   }
 
   &__operation {

react-ui/src/pages/HyperParameter/types.ts

@@ -15,6 +15,7 @@ export type FormData = {
   code: ParameterInputObject; // 代码
   dataset: ParameterInputObject; // 数据集
   model: ParameterInputObject; // 模型
+  image: ParameterInputObject; // 镜像
   main_py: string; // 主函数代码文件
   metric: string; // 指标
   mode: string; // 优化方向

react-ui/src/pages/ModelDeployment/CreateVersion/index.less

@@ -30,7 +30,7 @@
       }
 
       .ant-btn-variant-text:disabled {
-        color: rgba(0, 0, 0, 0.25);
+        color: @text-disabled-color;
       }
 
       .ant-btn-variant-text {

react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx

@@ -165,7 +165,7 @@ function VersionCompareModal({ version1, version2, ...rest }: VersionCompareModa
                   [styles['version-compare__left__text--different']]: isDifferent(key),
                 })}
               >
-                <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
+                <Typography.Text ellipsis={{ tooltip: text }}>
                   {isEmpty(text) ? '--' : text}
                 </Typography.Text>
               </div>
@@ -183,7 +183,7 @@ function VersionCompareModal({ version1, version2, ...rest }: VersionCompareModa
                   [styles['version-compare__right__text--different']]: isDifferent(key),
                 })}
               >
-                <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
+                <Typography.Text ellipsis={{ tooltip: text }}>
                   {isEmpty(text) ? '--' : text}
                 </Typography.Text>
               </div>

react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx

@@ -1,6 +1,10 @@
 import KFIcon from '@/components/KFIcon';
 import ParameterInput, { requiredValidator } from '@/components/ParameterInput';
 import ParameterSelect from '@/components/ParameterSelect';
+import ResourceSelectorModal, {
+  ResourceSelectorType,
+  selectorTypeConfig,
+} from '@/components/ResourceSelectorModal';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { CommonTabKeys } from '@/enums';
 import { useComputingResource } from '@/hooks/resource';
@@ -19,10 +23,6 @@ import { NamePath } from 'antd/es/form/interface';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import CodeSelectorModal from '../CodeSelectorModal';
 import PropsLabel from '../PropsLabel';
-import ResourceSelectorModal, {
-  ResourceSelectorType,
-  selectorTypeConfig,
-} from '../ResourceSelectorModal';
 import styles from './index.less';
 const { TextArea } = Input;
 

react-ui/src/styles/theme.less

@@ -12,6 +12,8 @@
 @text-color: #1d1d20;
 @text-color-secondary: #575757;
 @text-color-tertiary: #8a8a8a;
+@text-placeholder-color: rgba(0, 0, 0, 0.25);
+@text-disabled-color: rgba(0, 0, 0, 0.25);
 @success-color: #6ac21d;
 @error-color: #c73131;
 @warning-color: #f98e1b;