Merge pull request '合并dev-zw' (#181) from dev-zw-points into dev-zw

react-ui/.nvmrc

@@ -1 +1 @@
-v18.16.0
+v18.20.7

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

@@ -30,6 +30,7 @@ function CodeSelect({
   onChange,
   ...rest
 }: CodeSelectProps) {
+  // 选择代码配置
   const selectResource = () => {
     const { close } = openAntdModal(CodeSelectorModal, {
       onOk: (res) => {
@@ -59,6 +60,11 @@ function CodeSelect({
     });
   };
 
+  // 删除
+  const handleRemove = () => {
+    onChange?.(undefined);
+  };
+
   return (
     <div className={classNames('kf-code-select', className)} style={style}>
       <ParameterInput
@@ -68,6 +74,7 @@ function CodeSelect({
         value={value}
         onChange={onChange}
         onClick={selectResource}
+        onRemove={handleRemove}
       ></ParameterInput>
       <Button
         className="kf-code-select__button"

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

@@ -6,7 +6,7 @@
 
 import { CommonTabKeys } from '@/enums';
 import { CloseOutlined } from '@ant-design/icons';
-import { Form, Input } from 'antd';
+import { ConfigProvider, Form, Input } from 'antd';
 import { RuleObject } from 'antd/es/form';
 import classNames from 'classnames';
 import './index.less';
@@ -67,7 +67,7 @@ function ParameterInput({
   allowClear,
   className,
   style,
-  size = 'middle',
+  size,
   disabled = false,
   id,
   ...rest
@@ -81,10 +81,17 @@ function ParameterInput({
   const placeholder = valueObj?.placeholder || rest?.placeholder;
   const InputComponent = textArea ? Input.TextArea : Input;
   const { status } = Form.Item.useStatus();
+  const { componentSize } = ConfigProvider.useConfig();
+  const mySize = size || componentSize;
 
   // 删除
   const handleRemove = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
     e.stopPropagation();
+    if (onRemove) {
+      onRemove();
+      return;
+    }
+
     onChange?.({
       ...valueObj,
       value: undefined,
@@ -94,7 +101,6 @@ function ParameterInput({
       expandedKeys: [],
       checkedKeys: [],
     });
-    onRemove?.();
   };
 
   return (
@@ -104,8 +110,8 @@ function ParameterInput({
           id={id}
           className={classNames(
             'parameter-input',
-            { 'parameter-input--large': size === 'large' },
-            { 'parameter-input--small': size === 'small' },
+            { 'parameter-input--large': mySize === 'large' },
+            { 'parameter-input--small': mySize === 'small' },
             { [`parameter-input--${status}`]: status },
             className,
           )}
@@ -128,7 +134,7 @@ function ParameterInput({
         <InputComponent
           {...rest}
           id={id}
-          size={size}
+          size={mySize}
           className={className}
           style={style}
           placeholder={placeholder}

react-ui/src/components/ParameterSelect/config.tsx

@@ -1,21 +1,10 @@
+import { filterResourceStandard, resourceFieldNames } from '@/hooks/resource';
 import { ServiceData } from '@/pages/ModelDeployment/types';
 import { getDatasetList, getModelList } from '@/services/dataset/index.js';
 import { getServiceListReq } from '@/services/modelDeployment';
-import { getComputingResourceReq } from '@/services/pipeline';
-import { ComputingResource } from '@/types';
 import { type SelectProps } from 'antd';
 import { pick } from 'lodash';
 
-// 过滤资源规格
-const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
-  input: string,
-  option?: ComputingResource,
-) => {
-  return (
-    option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
-  );
-};
-
 // id 从 number 转换为 string
 const convertId = (item: any) => ({
   ...item,
@@ -86,17 +75,10 @@ export const paramSelectConfig: Record<string, SelectPropsConfig> = {
   },
   resource: {
     getOptions: async () => {
-      const res = await getComputingResourceReq({
-        page: 0,
-        size: 1000,
-        resource_type: '',
-      });
-      return res?.data?.content ?? [];
-    },
-    fieldNames: {
-      label: 'description',
-      value: 'standard',
+      // 不需要这个函数
+      return [];
     },
+    fieldNames: resourceFieldNames,
     filterOption: filterResourceStandard as SelectProps['filterOption'],
   },
 };

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

@@ -4,6 +4,7 @@
  * @Description: 参数下拉选择组件，支持资源规格、数据集、模型、服务
  */
 
+import { useComputingResource } from '@/hooks/resource';
 import { to } from '@/utils/promise';
 import { Select, type SelectProps } from 'antd';
 import { useEffect, useState } from 'react';
@@ -20,7 +21,7 @@ export interface ParameterSelectProps extends SelectProps {
   dataType: 'dataset' | 'model' | 'service' | 'resource';
   /** 是否只是展示信息 */
   display?: boolean;
-  /** 值 */
+  /** 值，支持对象，对象必须包含 value */
   value?: string | ParameterSelectObject;
   /** 修改后回调 */
   onChange?: (value: string | ParameterSelectObject) => void;
@@ -34,9 +35,10 @@ function ParameterSelect({
   onChange,
   ...rest
 }: ParameterSelectProps) {
-  const [options, setOptions] = useState([]);
+  const [options, setOptions] = useState<SelectProps['options']>([]);
   const propsConfig = paramSelectConfig[dataType];
   const valueText = typeof value === 'object' && value !== null ? value.value : value;
+  const [resourceStandardList] = useComputingResource();
 
   useEffect(() => {
     // 获取下拉数据
@@ -54,6 +56,8 @@ function ParameterSelect({
     getSelectOptions();
   }, [propsConfig]);
 
+  const selectOptions = dataType === 'resource' ? resourceStandardList : options;
+
   const handleChange = (text: string) => {
     if (typeof value === 'object' && value !== null) {
       onChange?.({
@@ -71,7 +75,7 @@ function ParameterSelect({
       <FormInfo
         select
         value={valueText}
-        options={options}
+        options={selectOptions}
         fieldNames={propsConfig?.fieldNames}
       ></FormInfo>
     );
@@ -81,7 +85,7 @@ function ParameterSelect({
     <Select
       {...rest}
       filterOption={propsConfig?.filterOption}
-      options={options}
+      options={selectOptions}
       fieldNames={propsConfig?.fieldNames}
       optionFilterProp={propsConfig?.optionFilterProp}
       value={valueText}

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

@@ -11,10 +11,9 @@ import ResourceSelectorModal, {
   selectorTypeConfig,
 } from '@/components/ResourceSelectorModal';
 import { openAntdModal } from '@/utils/modal';
-import { Button } from 'antd';
+import { Button, ConfigProvider } from 'antd';
 import classNames from 'classnames';
 import { pick } from 'lodash';
-import { useEffect, useState } from 'react';
 import ParameterInput, { type ParameterInputProps } from '../ParameterInput';
 import './index.less';
 
@@ -46,43 +45,40 @@ function ResourceSelect({
   onChange,
   ...rest
 }: ResourceSelectProps) {
-  const [selectedResource, setSelectedResource] = useState<ResourceSelectorResponse | undefined>(
-    undefined,
-  );
-
-  useEffect(() => {
-    if (
-      value &&
-      typeof value === 'object' &&
-      value.activeTab &&
-      value.id &&
-      value.name &&
-      value.version &&
-      value.path &&
-      (type === ResourceSelectorType.Mirror || (value.identifier && value.owner))
-    ) {
-      const originResource = pick(value, [
-        'activeTab',
-        'id',
-        'identifier',
-        'name',
-        'owner',
-        'version',
-        'path',
-      ]) as ResourceSelectorResponse;
-      setSelectedResource(originResource);
-    }
-  }, [value, type]);
+  const { componentSize } = ConfigProvider.useConfig();
+  const mySize = size || componentSize;
+  let selectedResource: ResourceSelectorResponse | undefined = undefined;
+  if (
+    value &&
+    typeof value === 'object' &&
+    value.activeTab &&
+    value.id &&
+    value.name &&
+    value.version &&
+    value.path &&
+    (type === ResourceSelectorType.Mirror || (value.identifier && value.owner))
+  ) {
+    selectedResource = pick(value, [
+      'activeTab',
+      'id',
+      'identifier',
+      'name',
+      'owner',
+      'version',
+      'path',
+    ]) as ResourceSelectorResponse;
+  }
 
+  // 选择数据集、模型、镜像
   const selectResource = () => {
-    const resource = selectedResource;
     const { close } = openAntdModal(ResourceSelectorModal, {
       type,
-      defaultExpandedKeys: resource ? [resource.id] : [],
-      defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [],
-      defaultActiveTab: resource?.activeTab,
+      defaultExpandedKeys: selectedResource ? [selectedResource.id] : [],
+      defaultCheckedKeys: selectedResource
+        ? [`${selectedResource.id}-${selectedResource.version}`]
+        : [],
+      defaultActiveTab: selectedResource?.activeTab,
       onOk: (res) => {
-        setSelectedResource(res);
         if (res) {
           const { activeTab, id, name, version, path, identifier, owner } = res;
           if (type === ResourceSelectorType.Mirror) {
@@ -116,32 +112,32 @@ function ResourceSelect({
             });
           }
         } else {
-          onChange?.({
-            value: undefined,
-            showValue: undefined,
-            fromSelect: false,
-            activeTab: undefined,
-          });
+          onChange?.(undefined);
         }
         close();
       },
     });
   };
 
+  // 删除
+  const handleRemove = () => {
+    onChange?.(undefined);
+  };
+
   return (
     <div className={classNames('kf-resource-select', className)} style={style}>
       <ParameterInput
         {...rest}
         disabled={disabled}
         value={value}
-        size={size}
+        size={mySize}
         onChange={onChange}
-        onRemove={() => setSelectedResource(undefined)}
+        onRemove={handleRemove}
         onClick={selectResource}
       ></ParameterInput>
       <Button
         className="kf-resource-select__button"
-        size={size}
+        size={mySize}
         type="link"
         icon={getSelectBtnIcon(type)}
         disabled={disabled}

react-ui/src/hooks/resource.ts

@@ -12,6 +12,22 @@ import { useCallback, useEffect, useState } from 'react';
 
 const computingResource: ComputingResource[] = [];
 
+// 过滤资源规格
+export const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
+  input: string,
+  option?: ComputingResource,
+) => {
+  return (
+    option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
+  );
+};
+
+// 资源规格字段
+export const resourceFieldNames = {
+  label: 'description',
+  value: 'id',
+};
+
 // 获取资源规格
 export function useComputingResource() {
   const [resourceStandardList, setResourceStandardList] = useState<ComputingResource[]>([]);
@@ -25,7 +41,7 @@ export function useComputingResource() {
         resource_type: '',
       };
       const [res] = await to(getComputingResourceReq(params));
-      if (res && res.data && res.data.content) {
+      if (res && res.data && Array.isArray(res.data.content)) {
         setResourceStandardList(res.data.content);
         computingResource.splice(0, computingResource.length, ...res.data.content);
       }
@@ -38,25 +54,16 @@ export function useComputingResource() {
     }
   }, []);
 
-  // 过滤资源规格
-  const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] =
-    useCallback((input: string, option?: ComputingResource) => {
-      return (
-        option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ??
-        false
-      );
-    }, []);
-
   // 根据 standard 获取 description
   const getDescription = useCallback(
-    (standard?: string) => {
-      if (!standard) {
+    (id?: string | number) => {
+      if (!id) {
         return undefined;
       }
-      return resourceStandardList.find((item) => item.standard === standard)?.description;
+      return resourceStandardList.find((item) => Number(item.id) === Number(id))?.description;
     },
     [resourceStandardList],
   );
 
-  return [resourceStandardList, filterResourceStandard, getDescription] as const;
+  return [resourceStandardList, getDescription] as const;
 }

react-ui/src/pages/AutoML/Instance/index.tsx

@@ -40,7 +40,7 @@ function AutoMLInstance() {
       closeSSE();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [instanceId]);
 
   // 获取实验实例详情
   const getExperimentInsInfo = async (isStatusDetermined: boolean) => {

react-ui/src/pages/AutoML/components/CreateForm/DatasetConfig.tsx

@@ -30,7 +30,6 @@ function DatasetConfig() {
               type={ResourceSelectorType.Dataset}
               placeholder="请选择数据集"
               canInput={false}
-              size="large"
             />
           </Form.Item>
         </Col>

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

@@ -431,7 +431,12 @@ function ExecuteConfig() {
 
       <Row gutter={8}>
         <Col span={10}>
-          <Form.Item label="是否打乱" name="shuffle" tooltip="拆分数据前是否打乱顺序">
+          <Form.Item
+            label="是否打乱"
+            name="shuffle"
+            tooltip="拆分数据前是否打乱顺序"
+            valuePropName="checked"
+          >
             <Switch />
           </Form.Item>
         </Col>

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

@@ -6,17 +6,17 @@
 import KFIcon from '@/components/KFIcon';
 import KFRadio, { type KFRadioItem } from '@/components/KFRadio';
 import PageTitle from '@/components/PageTitle';
+import ParameterSelect from '@/components/ParameterSelect';
 import ResourceSelect, {
   requiredValidator,
   ResourceSelectorType,
   type ParameterInputObject,
 } from '@/components/ResourceSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
-import { useComputingResource } from '@/hooks/resource';
 import { createEditorReq } from '@/services/developmentEnvironment';
 import { to } from '@/utils/promise';
 import { useNavigate } from '@umijs/max';
-import { App, Button, Col, Form, Input, Row, Select } from 'antd';
+import { App, Button, Col, Form, Input, Row } from 'antd';
 import { omit, pick } from 'lodash';
 import styles from './index.less';
 
@@ -51,7 +51,6 @@ function EditorCreate() {
   const navigate = useNavigate();
   const [form] = Form.useForm();
   const { message } = App.useApp();
-  const [resourceStandardList, filterResourceStandard] = useComputingResource();
 
   // 创建编辑器
   const createEditor = async (formData: FormData) => {
@@ -62,8 +61,8 @@ function EditorCreate() {
     const params = {
       ...omit(formData, ['image', 'model', 'dataset']),
       image: image.value,
-      model: pick(model, ['id', 'version', 'path', 'showValue']),
-      dataset: pick(dataset, ['id', 'version', 'path', 'showValue']),
+      model: model && pick(model, ['id', 'version', 'path', 'showValue']),
+      dataset: dataset && pick(dataset, ['id', 'version', 'path', 'showValue']),
     };
     const [res] = await to(createEditorReq(params));
     if (res) {
@@ -146,16 +145,7 @@ function EditorCreate() {
                     },
                   ]}
                 >
-                  <Select
-                    showSearch
-                    placeholder="请选择资源规格"
-                    filterOption={filterResourceStandard}
-                    options={resourceStandardList}
-                    fieldNames={{
-                      label: 'description',
-                      value: 'standard',
-                    }}
-                  />
+                  <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
                 </Form.Item>
               </Col>
             </Row>
@@ -181,7 +171,6 @@ function EditorCreate() {
                     type={ResourceSelectorType.Mirror}
                     placeholder="请选择镜像"
                     canInput={false}
-                    size="large"
                   />
                 </Form.Item>
               </Col>
@@ -193,7 +182,6 @@ function EditorCreate() {
                     type={ResourceSelectorType.Model}
                     placeholder="请选择模型"
                     canInput={false}
-                    size="large"
                   />
                 </Form.Item>
               </Col>
@@ -205,7 +193,6 @@ function EditorCreate() {
                     type={ResourceSelectorType.Dataset}
                     placeholder="请选择数据集"
                     canInput={false}
-                    size="large"
                   />
                 </Form.Item>
               </Col>

react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx

@@ -1,7 +1,6 @@
 import FormInfo from '@/components/FormInfo';
 import ParameterSelect from '@/components/ParameterSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
-import { useComputingResource } from '@/hooks/resource';
 import { PipelineNodeModelSerialize } from '@/types';
 import { Form } from 'antd';
 import styles from './index.less';
@@ -11,8 +10,6 @@ type ExperimentParameterProps = {
 };
 
 function ExperimentParameter({ nodeData }: ExperimentParameterProps) {
-  const [resourceStandardList] = useComputingResource(); // 资源规模
-
   // 控制策略
   const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map(
     ([key, value]) => ({ key, value }),
@@ -112,14 +109,7 @@ function ExperimentParameter({ nodeData }: ExperimentParameterProps) {
           },
         ]}
       >
-        <FormInfo
-          select
-          options={resourceStandardList}
-          fieldNames={{
-            label: 'description',
-            value: 'standard',
-          }}
-        />
+        <ParameterSelect dataType="resource" placeholder="请选择资源规格" display />
       </Form.Item>
       <Form.Item label="挂载路径" name="mount_path">
         <FormInfo />

react-ui/src/pages/Experiment/components/LogGroup/index.tsx

@@ -33,7 +33,7 @@ function LogGroup({
   status,
 }: LogGroupProps) {
   const [collapse, setCollapse] = useState(true);
-  const [logList, setLogList, logListRef] = useStateRef<Log[]>([]);
+  const [logList, setLogList] = useState<Log[]>([]);
   const [completed, setCompleted] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_isMouseDown, setIsMouseDown, isMouseDownRef] = useStateRef(false);
@@ -126,6 +126,14 @@ function LogGroup({
       socketRef.current = socket;
     };
 
+    // 关闭 socket
+    const closeSocket = () => {
+      if (socketRef.current) {
+        socketRef.current.close(1000, 'completed');
+        socketRef.current = undefined;
+      }
+    };
+
     if (status === ExperimentStatus.Running) {
       setupSockect();
     }
@@ -133,7 +141,7 @@ function LogGroup({
     return () => {
       closeSocket();
     };
-  }, [status, start_time, pod_name, isMouseDownRef, setLogList]);
+  }, [status, start_time, pod_name, isMouseDownRef]);
 
   // 鼠标拖到中不滚动到底部
   useEffect(() => {
@@ -153,8 +161,8 @@ function LogGroup({
 
   // 请求日志
   const requestExperimentPodsLog = async () => {
-    const list = logListRef.current;
-    const startTime = list.length > 0 ? list[list.length - 1].start_time : start_time;
+    const last = logList[logList.length - 1];
+    const startTime = last ? last.start_time : start_time;
     const params = {
       pod_name,
       start_time: startTime,
@@ -201,14 +209,6 @@ function LogGroup({
     requestExperimentPodsLog();
   };
 
-  // 关闭 socket
-  const closeSocket = () => {
-    if (socketRef.current) {
-      socketRef.current.close(1000, 'completed');
-      socketRef.current = undefined;
-    }
-  };
-
   // 滚动到底部
   const scrollToBottom = (smooth: boolean = true) => {
     // const element = document.getElementById(listId);

react-ui/src/pages/Experiment/index.jsx

@@ -277,7 +277,6 @@ function Experiment() {
       current,
       pageSize,
     });
-    getExperimentList();
   };
   // 运行实验
   const runExperiment = async (id) => {

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

@@ -44,7 +44,7 @@ function HyperParameterInstance() {
       closeSSE();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [instanceId]);
 
   // 获取实验实例详情
   const getExperimentInsInfo = async (isStatusDetermined: boolean) => {

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

@@ -1,12 +1,12 @@
 import CodeSelect from '@/components/CodeSelect';
 import KFIcon from '@/components/KFIcon';
+import ParameterSelect from '@/components/ParameterSelect';
 import ResourceSelect, {
   ResourceSelectorType,
   requiredValidator,
 } from '@/components/ResourceSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { hyperParameterOptimizedModeOptions } from '@/enums';
-import { useComputingResource } from '@/hooks/resource';
 import { isEmpty } from '@/utils';
 import { modalConfirm, removeFormListItem } from '@/utils/ui';
 import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
@@ -86,7 +86,6 @@ function ExecuteConfig() {
   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) => {
     if (
@@ -157,7 +156,6 @@ function ExecuteConfig() {
               type={ResourceSelectorType.Mirror}
               placeholder="请选择镜像"
               canInput={false}
-              size="large"
             />
           </Form.Item>
         </Col>
@@ -180,7 +178,6 @@ function ExecuteConfig() {
               type={ResourceSelectorType.Dataset}
               placeholder="请选择数据集"
               canInput={false}
-              size="large"
             />
           </Form.Item>
         </Col>
@@ -193,7 +190,6 @@ function ExecuteConfig() {
               type={ResourceSelectorType.Model}
               placeholder="请选择模型"
               canInput={false}
-              size="large"
             />
           </Form.Item>
         </Col>
@@ -596,7 +592,7 @@ function ExecuteConfig() {
         <Col span={10}>
           <Form.Item
             label="资源规格"
-            name="resource"
+            name="computing_resource_id"
             rules={[
               {
                 required: true,
@@ -604,16 +600,7 @@ function ExecuteConfig() {
               },
             ]}
           >
-            <Select
-              showSearch
-              placeholder="请选择资源规格"
-              filterOption={filterResourceStandard}
-              options={resourceStandardList}
-              fieldNames={{
-                label: 'description',
-                value: 'standard',
-              }}
-            />
+            <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
           </Form.Item>
         </Col>
       </Row>

react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx

@@ -41,7 +41,7 @@ function HyperParameterBasic({
   runStatus,
   isInstance = false,
 }: HyperParameterBasicProps) {
-  const getResourceDescription = useComputingResource()[2];
+  const getResourceDescription = useComputingResource()[1];
 
   const basicDatas: BasicInfoData[] = useMemo(() => {
     if (!info) {
@@ -136,7 +136,7 @@ function HyperParameterBasic({
       },
       {
         label: '资源规格',
-        value: info.resource,
+        value: info.computing_resource_id,
         format: getResourceDescription,
       },
     ];

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

@@ -24,7 +24,7 @@ export type FormData = {
   num_samples: number; // 总试验次数
   max_t: number; // 单次试验最大时间
   min_samples_required: number; // 计算中位数的最小试验数
-  resource: string; // 资源规格
+  computing_resource_id: number; // 资源规格
   parameters: FormParameter[];
   points_to_evaluate: { [key: string]: any }[];
 };

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

@@ -5,13 +5,13 @@
  */
 import CodeSelect from '@/components/CodeSelect';
 import PageTitle from '@/components/PageTitle';
+import ParameterSelect from '@/components/ParameterSelect';
 import ResourceSelect, {
   ResourceSelectorType,
   requiredValidator,
   type ParameterInputObject,
 } from '@/components/ResourceSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
-import { useComputingResource } from '@/hooks/resource';
 import {
   createServiceVersionReq,
   getServiceInfoReq,
@@ -23,7 +23,7 @@ import SessionStorage from '@/utils/sessionStorage';
 import { removeFormListItem } from '@/utils/ui';
 import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { useNavigate, useParams } from '@umijs/max';
-import { App, Button, Col, Flex, Form, Input, InputNumber, Row, Select } from 'antd';
+import { App, Button, Col, Flex, Form, Input, InputNumber, Row } from 'antd';
 import { omit, pick } from 'lodash';
 import { useEffect, useState } from 'react';
 import { CreateServiceVersionFrom, ServiceOperationType, ServiceVersionData } from '../types';
@@ -51,7 +51,7 @@ type ServiceVersionCache = ServiceVersionData & {
 function CreateServiceVersion() {
   const navigate = useNavigate();
   const [form] = Form.useForm();
-  const [resourceStandardList, filterResourceStandard] = useComputingResource();
+
   const [operationType, setOperationType] = useState(ServiceOperationType.Create);
   const [lastPage, setLastPage] = useState(CreateServiceVersionFrom.ServiceInfo);
   const { message } = App.useApp();
@@ -305,7 +305,6 @@ function CreateServiceVersion() {
                     placeholder="请选择模型"
                     disabled={disabled}
                     canInput={false}
-                    size="large"
                   />
                 </Form.Item>
               </Col>
@@ -327,7 +326,6 @@ function CreateServiceVersion() {
                     type={ResourceSelectorType.Mirror}
                     placeholder="请选择镜像"
                     canInput={false}
-                    size="large"
                     disabled={disabled}
                   />
                 </Form.Item>
@@ -357,16 +355,7 @@ function CreateServiceVersion() {
                     },
                   ]}
                 >
-                  <Select
-                    showSearch
-                    placeholder="请选择资源规格"
-                    filterOption={filterResourceStandard}
-                    options={resourceStandardList}
-                    fieldNames={{
-                      label: 'description',
-                      value: 'standard',
-                    }}
-                  />
+                  <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
                 </Form.Item>
               </Col>
             </Row>

react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx

@@ -87,7 +87,7 @@ function ServiceInfo() {
       format: formatDate,
     },
   ];
-  const getResourceDescription = useComputingResource()[2];
+  const getResourceDescription = useComputingResource()[1];
 
   // 获取服务详情
   const getServiceInfo = useCallback(async () => {

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

@@ -36,7 +36,7 @@ const formatEnvText = (env?: Record<string, string>) => {
 };
 
 function VersionBasicInfo({ info }: BasicInfoProps) {
-  const getResourceDescription = useComputingResource()[2];
+  const getResourceDescription = useComputingResource()[1];
 
   const datas: BasicInfoData[] = [
     {

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

@@ -42,7 +42,7 @@ const formatEnvText = (env: Record<string, string>) => {
 
 function VersionCompareModal({ version1, version2, ...rest }: VersionCompareModalProps) {
   const [compareData, setCompareData] = useState<CompareData | undefined>(undefined);
-  const getResourceDescription = useComputingResource()[2];
+  const getResourceDescription = useComputingResource()[1];
 
   const fields: FiledType[] = useMemo(
     () => [

react-ui/src/pages/Pipeline/Info/index.jsx

@@ -24,7 +24,7 @@ const EditPipeline = () => {
   const propsRef = useRef();
   const [paramsDrawerOpen, openParamsDrawer, closeParamsDrawer] = useVisible(false);
   const [globalParam, setGlobalParam, globalParamRef] = useStateRef([]);
-  const [workflowInfo, setWorkflowInfo] = useStateRef(undefined);
+  const [workflowInfo, setWorkflowInfo] = useState(undefined);
   const { message } = App.useApp();
   let sourceAnchorIdx, targetAnchorIdx, dropAnchorIdx;
   let dragSourceNode;

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

@@ -8,7 +8,6 @@ import ResourceSelectorModal, {
 } from '@/components/ResourceSelectorModal';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { CommonTabKeys } from '@/enums';
-import { useComputingResource } from '@/hooks/resource';
 import { canInput, createMenuItems } from '@/pages/Pipeline/Info/utils';
 import {
   PipelineGlobalParam,
@@ -19,7 +18,7 @@ import {
 import { openAntdModal } from '@/utils/modal';
 import { to } from '@/utils/promise';
 import { INode } from '@antv/g6';
-import { Button, Drawer, Form, Input, MenuProps, Select } from 'antd';
+import { Button, Drawer, Form, Input, MenuProps } from 'antd';
 import { NamePath } from 'antd/es/form/interface';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import PropsLabel from '../PropsLabel';
@@ -36,7 +35,6 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
     {} as PipelineNodeModelSerialize,
   );
   const [open, setOpen] = useState(false);
-  const [resourceStandardList, filterResourceStandard] = useComputingResource(); // 资源规模
   const [menuItems, setMenuItems] = useState<MenuProps['items']>([]);
 
   const afterOpenChange = async () => {
@@ -458,16 +456,7 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
             },
           ]}
         >
-          <Select
-            placeholder="请选择资源规格"
-            filterOption={filterResourceStandard}
-            options={resourceStandardList}
-            fieldNames={{
-              label: 'description',
-              value: 'standard',
-            }}
-            showSearch
-          />
+          <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
         </Form.Item>
         <Form.Item
           name="mount_path"

react-ui/src/stories/CodeSelect.stories.tsx

@@ -41,6 +41,7 @@ export const Primary: Story = {
     canInput: false,
     textArea: false,
     size: 'large',
+    placeholder: '请选择代码配置',
     style: { width: 400 },
   },
   render: function Render(args) {

react-ui/src/stories/ParameterInput.stories.tsx

@@ -1,5 +1,7 @@
 import ParameterInput, { ParameterInputValue } from '@/components/ParameterInput';
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Button } from 'antd';
 import { useState } from 'react';
 
@@ -18,7 +20,7 @@ const meta = {
     // backgroundColor: { control: 'color' },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  // args: { onClick: fn() },
+  args: { onChange: fn() },
 } satisfies Meta<typeof ParameterInput>;
 
 export default meta;
@@ -37,45 +39,6 @@ export const Input: Story = {
 };
 
 export const Select: Story = {
-  args: {
-    placeholder: '请输入工作目录',
-    style: { width: 300 },
-    value: 'storybook',
-    canInput: false,
-    size: 'large',
-  },
-};
-
-export const SelectWithObjctValue: Story = {
-  args: {
-    placeholder: '请输入工作目录',
-    style: { width: 300 },
-    value: {
-      value: 'storybook',
-      showValue: 'storybook',
-      fromSelect: true,
-    },
-    canInput: true,
-    size: 'large',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    placeholder: '请输入工作目录',
-    style: { width: 300 },
-    value: {
-      value: 'storybook',
-      showValue: 'storybook',
-      fromSelect: true,
-    },
-    canInput: true,
-    size: 'large',
-    disabled: true,
-  },
-};
-
-export const Application: Story = {
   args: {
     placeholder: '请输入工作目录',
     style: { width: 300 },
@@ -86,18 +49,24 @@ export const Application: Story = {
     const [value, setValue] = useState<ParameterInputValue | undefined>('');
 
     const onClick = () => {
-      setValue({
+      const value = {
         value: 'storybook',
         showValue: 'storybook',
         fromSelect: true,
-      });
+        otherValue: 'others',
+      };
+      setValue(value);
+      action('onChange')(value);
     };
     return (
       <>
         <ParameterInput
           {...args}
           value={value}
-          onChange={(value) => setValue(value)}
+          onChange={(value) => {
+            setValue(value);
+            action('onChange')(value);
+          }}
         ></ParameterInput>
         <Button type="primary" style={{ display: 'block', marginTop: 10 }} onClick={onClick}>
           模拟从全局参数选择
@@ -106,3 +75,18 @@ export const Application: Story = {
     );
   },
 };
+
+export const Disabled: Story = {
+  args: {
+    placeholder: '请输入工作目录',
+    style: { width: 300 },
+    value: {
+      value: 'storybook',
+      showValue: 'storybook',
+      fromSelect: true,
+    },
+    canInput: true,
+    size: 'large',
+    disabled: true,
+  },
+};

react-ui/src/stories/ResourceSelect.stories.tsx

@@ -76,6 +76,7 @@ export const Primary: Story = {
     canInput: false,
     textArea: false,
     size: 'large',
+    placeholder: '请选择数据集',
     style: { width: 400 },
   },
   render: function Render(args) {
@@ -120,7 +121,6 @@ export const InForm: Story = {
                 type={ResourceSelectorType.Dataset}
                 placeholder="请选择"
                 canInput={false}
-                size="large"
                 onChange={onChange}
               />
             </Form.Item>
@@ -133,7 +133,6 @@ export const InForm: Story = {
                 type={ResourceSelectorType.Model}
                 placeholder="请选择"
                 canInput={false}
-                size="large"
                 onChange={onChange}
               />
             </Form.Item>
@@ -146,7 +145,6 @@ export const InForm: Story = {
                 type={ResourceSelectorType.Mirror}
                 placeholder="请选择"
                 canInput={false}
-                size="large"
                 onChange={onChange}
               />
             </Form.Item>