From 445052caad2a5158de179a7c29c5d0b87be604d2 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Mon, 20 May 2024 11:01:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=B5=81=E6=B0=B4?= =?UTF-8?q?=E7=BA=BF=E8=8A=82=E7=82=B9=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ParameterInput/index.less | 43 ++++++++++ .../src/components/ParameterInput/index.tsx | 86 +++++++++++++++++++ .../components/ExperimentParameter/index.tsx | 6 +- .../Pipeline/components/PropsLabel/index.tsx | 8 +- .../src/pages/Pipeline/editPipeline/index.jsx | 11 +-- .../src/pages/Pipeline/editPipeline/props.jsx | 72 ++++++++-------- .../pages/Pipeline/editPipeline/props.less | 19 ++-- .../src/pages/Pipeline/editPipeline/utils.tsx | 19 +++- react-ui/src/types.ts | 7 ++ react-ui/src/utils/index.ts | 2 + 10 files changed, 213 insertions(+), 60 deletions(-) diff --git a/react-ui/src/components/ParameterInput/index.less b/react-ui/src/components/ParameterInput/index.less index e69de29b..738402a0 100644 --- a/react-ui/src/components/ParameterInput/index.less +++ b/react-ui/src/components/ParameterInput/index.less @@ -0,0 +1,43 @@ +.parameter-input { + flex: 1 1 auto; + min-width: 0; + height: 32px; + padding: 3px 11px; + border: 1px solid #d9d9d9; + border-radius: 6px; + + &:hover { + border-color: @primary-color; + } + + &__content { + display: flex; + align-items: center; + width: fit-content; + max-width: 100%; + height: 24px; + padding: 0 8px; + color: .addAlpha(@text-color, 0.8) []; + background-color: rgba(0, 0, 0, 0.06); + border-radius: 4px; + + &__value { + .singleLine(); + margin-right: 8px; + font-size: @font-size-input; + } + + &__close-icon { + font-size: 10px; + + &:hover { + color: #000; + } + } + } + + &__placeholder { + color: rgba(0, 0, 0, 0.25); + font-size: @font-size-input; + } +} diff --git a/react-ui/src/components/ParameterInput/index.tsx b/react-ui/src/components/ParameterInput/index.tsx index e69de29b..3fbcf364 100644 --- a/react-ui/src/components/ParameterInput/index.tsx +++ b/react-ui/src/components/ParameterInput/index.tsx @@ -0,0 +1,86 @@ +import { CloseOutlined } from '@ant-design/icons'; +import { Input } from 'antd'; +import styles from './index.less'; + +type ParameterInputData = { + value?: any; + showValue?: any; + fromSelect?: boolean; +} & Record; + +interface ParameterInputProps { + value?: ParameterInputData; + onChange?: (value: ParameterInputData) => void; + onClick?: () => void; + canInput?: boolean; + textArea?: boolean; + placeholder?: string; + allowClear?: boolean; +} + +function ParameterInput({ + value, + onChange, + onClick, + canInput = true, + textArea = false, + placeholder, + allowClear, + ...rest +}: ParameterInputProps) { + // console.log('ParameterInput', value); + + const valueObj = + typeof value === 'string' ? { value: value, fromSelect: false, showValue: value } : value; + if (valueObj && !valueObj.showValue) { + valueObj.showValue = valueObj.value; + } + const isSelect = valueObj?.fromSelect; + const InputComponent = textArea ? Input.TextArea : Input; + + return ( + <> + {isSelect || !canInput ? ( +
+ {valueObj?.showValue ? ( +
+ + {valueObj?.showValue} + + + onChange?.({ + ...valueObj, + fromSelect: false, + value: undefined, + showValue: undefined, + }) + } + /> +
+ ) : ( +
{placeholder}
+ )} +
+ ) : ( + + onChange?.({ + ...valueObj, + fromSelect: false, + value: e.target.value, + showValue: e.target.value, + }) + } + /> + )} + + ); +} + +export default ParameterInput; diff --git a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx index e0a8daf3..f3528037 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx +++ b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx @@ -146,7 +146,7 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) { name={['control_strategy', item.key]} label={item.value.label} getValueProps={(e) => { - return { value: e.value }; + return { value: e.showValue || e.value }; }} > @@ -162,7 +162,7 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) { label={item.value.label + '(' + item.key + ')'} rules={[{ required: item.value.require ? true : false }]} getValueProps={(e) => { - return { value: e.value }; + return { value: e.showValue || e.value }; }} > @@ -178,7 +178,7 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) { label={item.value.label + '(' + item.key + ')'} rules={[{ required: item.value.require ? true : false }]} getValueProps={(e) => { - return { value: e.value }; + return { value: e.showValue || e.value }; }} > diff --git a/react-ui/src/pages/Pipeline/components/PropsLabel/index.tsx b/react-ui/src/pages/Pipeline/components/PropsLabel/index.tsx index 9e64775e..c1b2f2d5 100644 --- a/react-ui/src/pages/Pipeline/components/PropsLabel/index.tsx +++ b/react-ui/src/pages/Pipeline/components/PropsLabel/index.tsx @@ -1,4 +1,4 @@ -import { Button, Dropdown, type MenuProps } from 'antd'; +import { Dropdown, type MenuProps } from 'antd'; import { useEffect } from 'react'; import styles from './index.less'; @@ -22,7 +22,7 @@ function PropsLabel({ title, menuItems, onClick }: PropsLabelProps) { return (
- {title} +
{title}
- + e.preventDefault()}>参数
); diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx index d8aa6979..b44a8f6e 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/index.jsx @@ -28,7 +28,7 @@ const EditPipeline = () => { let sourceAnchorIdx, targetAnchorIdx; const onDragEnd = (val) => { - console.log(val, 'eee'); + console.log(val); const _x = val.x; const _y = val.y; const point = graph.getPointByClient(_x, _y); @@ -41,10 +41,8 @@ const EditPipeline = () => { id: val.component_name + '-' + s8(), isCluster: false, }; - console.log(graph, model); - + console.log('model', model); graph.addItem('node', model, true); - console.log(graph); }; const formChange = (val) => { if (graph) { @@ -73,7 +71,6 @@ const EditPipeline = () => { } const [propsRes, propsError] = await to(propsRef.current.getFieldsValue()); - console.log(await to(propsRef.current.getFieldsValue())); if (propsError) { message.error('基本信息必填项需配置'); return; @@ -110,7 +107,6 @@ const EditPipeline = () => { } }; const getGraphData = (data) => { - console.log('graph', graph); if (graph) { console.log(data); graph.data(data); @@ -193,6 +189,7 @@ const EditPipeline = () => { } } + // eslint-disable-next-line for (const key in edgeMap) { const arcEdges = edgeMap[key]; const { length } = arcEdges; @@ -435,7 +432,7 @@ const EditPipeline = () => { height: graphRef.current.clientHeight || '100%', animate: false, groupByTypes: false, - fitView: true, + fitView: false, plugins: [contextMenu], enabledStack: true, modes: { diff --git a/react-ui/src/pages/Pipeline/editPipeline/props.jsx b/react-ui/src/pages/Pipeline/editPipeline/props.jsx index bc054272..f2d71963 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/props.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/props.jsx @@ -1,4 +1,5 @@ import KFIcon from '@/components/KFIcon'; +import ParameterInput from '@/components/ParameterInput'; import SubAreaTitle from '@/components/SubAreaTitle'; import { getComputingResourceReq } from '@/services/pipeline'; import { openAntdModal } from '@/utils/modal'; @@ -9,7 +10,7 @@ import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'; import PropsLabel from '../components/PropsLabel'; import ResourceSelectorModal, { ResourceSelectorType } from '../components/ResourceSelectorModal'; import styles from './props.less'; -import { createMenuItems } from './utils'; +import { canInput, createMenuItems } from './utils'; const { TextArea } = Input; const Props = forwardRef(({ onParentChange }, ref) => { @@ -40,7 +41,7 @@ const Props = forwardRef(({ onParentChange }, ref) => { const afterOpenChange = () => { if (!open) { - // console.log('zzzzz', form.getFieldsValue()); + console.log('zzzzz', form.getFieldsValue()); const control_strategy = form.getFieldValue('control_strategy'); const in_parameters = form.getFieldValue('in_parameters'); const out_parameters = form.getFieldValue('out_parameters'); @@ -77,6 +78,7 @@ const Props = forwardRef(({ onParentChange }, ref) => { out_parameters: JSON.parse(model.out_parameters), control_strategy: JSON.parse(model.control_strategy), }; + console.log('model', nodeData); setStagingItem({ ...nodeData, }); @@ -95,7 +97,7 @@ const Props = forwardRef(({ onParentChange }, ref) => { } }, propClose: () => { - close(); + onClose(); }, })); @@ -128,7 +130,8 @@ const Props = forwardRef(({ onParentChange }, ref) => { } else { const jsonObj = pick(res, ['id', 'version', 'path']); const value = JSON.stringify(jsonObj); - form.setFieldValue(name, { ...item, value }); + const showValue = `${res.name}：${res.version}`; + form.setFieldValue(name, { ...item, value, showValue, fromSelect: true }); } if (type === ResourceSelectorType.Dataset) { @@ -352,21 +355,23 @@ const Props = forwardRef(({ onParentChange }, ref) => { handleParameterClick(['control_strategy', item.key], { ...item.value, value, + fromSelect: true, + showValue: value, }); }} /> } - getValueProps={(e) => { - return { value: e.value }; - }} - getValueFromEvent={(e) => { - return { - ...item.value, - value: e.target.value, - }; - }} + // getValueProps={(e) => { + // return { value: e.value }; + // }} + // getValueFromEvent={(e) => { + // return { + // ...item.value, + // value: e.target.value, + // }; + // }} > - + ))}
@@ -383,6 +388,8 @@ const Props = forwardRef(({ onParentChange }, ref) => { handleParameterClick(['in_parameters', item.key], { ...item.value, value, + fromSelect: true, + showValue: value, }); }} /> @@ -394,17 +401,12 @@ const Props = forwardRef(({ onParentChange }, ref) => { name={['in_parameters', item.key]} noStyle rules={[{ required: item.value.require ? true : false }]} - getValueProps={(e) => { - return { value: e.value }; - }} - getValueFromEvent={(e) => { - return { - ...item.value, - value: e.target.value, - }; - }} > - + {item.value.type === 'ref' && ( @@ -437,22 +439,24 @@ const Props = forwardRef(({ onParentChange }, ref) => { handleParameterClick(['out_parameters', item.key], { ...item.value, value, + fromSelect: true, + showValue: value, }); }} /> } rules={[{ required: item.value.require ? true : false }]} - getValueProps={(e) => { - return { value: e.value }; - }} - getValueFromEvent={(e) => { - return { - ...item.value, - value: e.target.value, - }; - }} + // getValueProps={(e) => { + // return { value: e.value }; + // }} + // getValueFromEvent={(e) => { + // return { + // ...item.value, + // value: e.target.value, + // }; + // }} > - + ))} diff --git a/react-ui/src/pages/Pipeline/editPipeline/props.less b/react-ui/src/pages/Pipeline/editPipeline/props.less index 1b21600a..7a802a9b 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/props.less +++ b/react-ui/src/pages/Pipeline/editPipeline/props.less @@ -24,16 +24,15 @@ &__ref-row { display: flex; align-items: center; - } - &__select-button { - display: flex; - flex: none; - align-items: center; - justify-content: flex-start; - // width: 100px; - margin-left: 10px; - padding-right: 0; - padding-left: 0; + &__select-button { + display: flex; + flex: none; + align-items: center; + justify-content: flex-start; + margin-left: 10px; + padding-right: 0; + padding-left: 0; + } } } diff --git a/react-ui/src/pages/Pipeline/editPipeline/utils.tsx b/react-ui/src/pages/Pipeline/editPipeline/utils.tsx index b96e90b9..ffe4eb76 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/utils.tsx +++ b/react-ui/src/pages/Pipeline/editPipeline/utils.tsx @@ -1,4 +1,4 @@ -import { PipelineGlobalParam } from '@/types'; +import { PipelineGlobalParam, PipelineNodeModelParameter } from '@/types'; import { parseJsonText } from '@/utils'; import { Graph, INode } from '@antv/g6'; import { type MenuProps } from 'antd'; @@ -67,3 +67,20 @@ export function createMenuItems( ...nodes, ]; } + +export function getInParameterComponent( + parameter: PipelineNodeModelParameter, +): React.ReactNode | null { + if (parameter.value) { + } + + return null; +} + +export function canInput(parameter: PipelineNodeModelParameter) { + const { type, item_type } = parameter; + return !( + type === 'ref' && + (item_type === 'dataset' || item_type === 'model' || item_type === 'image') + ); +} diff --git a/react-ui/src/types.ts b/react-ui/src/types.ts index 7a069dbc..287535ee 100644 --- a/react-ui/src/types.ts +++ b/react-ui/src/types.ts @@ -49,10 +49,17 @@ export type PipelineNodeModelParameter = { value: any; require: number; type: string; + item_type: string; placeholder?: string; describe?: string; + fromSelect?: boolean; + showValue?: any; + editable: number; }; +// type ChangePropertyType = Omit & { [P in K]: NewType } + +// 序列化后的流水线节点 export type PipelineNodeModelSerialize = Omit< PipelineNodeModel, 'control_strategy' | 'in_parameters' | 'out_parameters' diff --git a/react-ui/src/utils/index.ts b/react-ui/src/utils/index.ts index 9086aa38..a2042b0b 100644 --- a/react-ui/src/utils/index.ts +++ b/react-ui/src/utils/index.ts @@ -3,6 +3,8 @@ * @Date: 2024-03-25 13:52:54 * @Description: 工具类 */ + +// 生成 8 位随机数 export function s8() { return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1); }