From 78e016baa99693e593ede9b3653ac55fd14fc56b Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Thu, 16 May 2024 18:11:12 +0800 Subject: [PATCH 1/8] =?UTF-8?q?style:=20=E6=B5=81=E6=B0=B4=E7=BA=BFG6?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ParameterInput/index.less | 0 .../src/components/ParameterInput/index.tsx | 0 .../components/ExperimentParameter/index.tsx | 33 +- .../Experiment/experimentText/index.less | 2 + .../Pipeline/editPipeline/editPipeline.less | 80 --- .../src/pages/Pipeline/editPipeline/index.jsx | 47 +- .../pages/Pipeline/editPipeline/index.less | 29 ++ .../Pipeline/editPipeline/modelMenus.jsx | 2 +- .../Pipeline/editPipeline/modelMenus.less | 72 +-- .../src/pages/Pipeline/editPipeline/props.jsx | 488 +++++++++--------- .../pages/Pipeline/editPipeline/props.less | 38 ++ 11 files changed, 386 insertions(+), 405 deletions(-) create mode 100644 react-ui/src/components/ParameterInput/index.less create mode 100644 react-ui/src/components/ParameterInput/index.tsx delete mode 100644 react-ui/src/pages/Pipeline/editPipeline/editPipeline.less create mode 100644 react-ui/src/pages/Pipeline/editPipeline/index.less create mode 100644 react-ui/src/pages/Pipeline/editPipeline/props.less diff --git a/react-ui/src/components/ParameterInput/index.less b/react-ui/src/components/ParameterInput/index.less new file mode 100644 index 0000000..e69de29 diff --git a/react-ui/src/components/ParameterInput/index.tsx b/react-ui/src/components/ParameterInput/index.tsx new file mode 100644 index 0000000..e69de29 diff --git a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx index 06fa87e..e0a8daf 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx +++ b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx @@ -1,6 +1,9 @@ import SubAreaTitle from '@/components/SubAreaTitle'; +import { getComputingResourceReq } from '@/services/pipeline'; import { PipelineNodeModelSerialize } from '@/types'; -import { Form, Input, type FormProps } from 'antd'; +import { to } from '@/utils/promise'; +import { Form, Input, Select, type FormProps } from 'antd'; +import { useEffect, useState } from 'react'; import styles from './index.less'; const { TextArea } = Input; @@ -10,6 +13,25 @@ type ExperimentParameterProps = { }; function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) { + const [resourceStandardList, setResourceStandardList] = useState([]); // 资源规模列表 + + useEffect(() => { + getComputingResource(); + }, []); + + // 获取资源规格列表数据 + const getComputingResource = async () => { + const params = { + page: 0, + size: 1000, + resource_type: '', + }; + const [res] = await to(getComputingResourceReq(params)); + if (res && res.data && res.data.content) { + setResourceStandardList(res.data.content); + } + }; + // 控制策略 const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map( ([key, value]) => ({ key, value }), @@ -103,7 +125,14 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) { }, ]} > - + diff --git a/react-ui/src/pages/Experiment/experimentText/index.less b/react-ui/src/pages/Experiment/experimentText/index.less index 8c341aa..f2f5510 100644 --- a/react-ui/src/pages/Experiment/experimentText/index.less +++ b/react-ui/src/pages/Experiment/experimentText/index.less @@ -27,5 +27,7 @@ width: 100%; height: calc(100% - 56px); background-color: @background-color; + background-image: url(/assets/images/pipeline-canvas-back.png); + background-size: 100% 100%; } } diff --git a/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less b/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less deleted file mode 100644 index 382cc58..0000000 --- a/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less +++ /dev/null @@ -1,80 +0,0 @@ -#graph { - position: relative; - width: 100%; - height: 100%; -} -.editPipelineProps { - :global { - label { - width: 100%; - - &::after { - display: none; - } - } - } -} -.editPipelinePropsContent { - display: flex; - align-items: center; - width: 100%; - height: 43px; - margin-bottom: 20px; - padding: 0 24px; - color: #1d1d20; - font-size: 15px; - font-family: 'Alibaba'; - background: #f8fbff; -} -.centerContainer { - display: flex; - flex: 1; - flex-direction: column; -} -.buttonList { - display: flex; - align-items: center; - justify-content: end; - width: 100%; - height: 45px; - padding: 0 30px; - background: #ffffff; - box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); -} -.rightmenu { - position: absolute; - top: 0px; - left: 0px; - width: 120px; - height: 146px; - overflow-y: auto; - color: #333333; - font-size: 12px; - - background-color: #ffffff; -} - -.rightmenuItem { - padding: 10px 20px; - cursor: pointer; -} -.rightmenuItem:hover { - color: #ffffff; - background-color: rgba(24, 144, 255, 0.3); -} - -.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; - } -} diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx index fe42151..b367523 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/index.jsx @@ -2,14 +2,13 @@ import KFIcon from '@/components/KFIcon'; import { useStateRef, useVisible } from '@/hooks'; import { getWorkflowById, saveWorkflow } from '@/services/pipeline/index.js'; import { to } from '@/utils/promise'; -import { useEmotionCss } from '@ant-design/use-emotion-css'; import G6 from '@antv/g6'; import { Button, message } from 'antd'; import { useEffect, useRef } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { s8 } from '../../../utils'; import GlobalParamsDrawer from '../components/GlobalParamsDrawer'; -import Styles from './editPipeline.less'; +import styles from './index.less'; import ModelMenus from './modelMenus'; import Props from './props'; import { findAllParentNodes, findFirstDuplicate } from './utils'; @@ -20,42 +19,6 @@ const EditPipeline = () => { const navgite = useNavigate(); let contextMenu = {}; const locationParams = useParams(); //新版本获取路由参数接口 - - const pipelineContainer = useEmotionCss(() => { - return { - display: 'flex', - backgroundColor: '#fff', - height: '98vh', - position: 'relative', - }; - }); - const rightmenu = useEmotionCss(() => { - return { - position: 'absolute', - width: '120px', - height: '146px', - left: '0px', - top: '0px', - - color: '#333333', - overflowY: 'auto', - }; - }); - const rightmenuItem = useEmotionCss(() => { - return { - padding: '10px 20px', - cursor: 'pointer', - fontSize: '12px', - }; - }); - const graphStyle = useEmotionCss(() => { - return { - width: '100%', - backgroundSize: '100% 100%', - backgroundImage: 'url(/assets/images/pipeline-canvas-back.png)', - flex: 1, - }; - }); const graphRef = useRef(); const paramsDrawerRef = useRef(); const propsRef = useRef(); @@ -730,10 +693,10 @@ const EditPipeline = () => { }; }; return ( -
+
-
-
+
+
-
+
{ }; const { Panel } = Collapse; return ( -
+
组件库
{modelMenusList && modelMenusList.length > 0 ? ( .ant-collapse-item > .ant-collapse-header { + margin-bottom: 5px; + padding: 20px 16px 15px 16px; + background-color: #fff; + border-color: transparent; + } + + .ant-collapse > .ant-collapse-item { + margin: 0 10px; + border-bottom: 0.5px dashed rgba(20, 49, 179, 0.12); + border-radius: 0px; + } + .ant-collapse .ant-collapse-content { + padding-bottom: 15px; + border-top: 1px solid transparent; + } + .ant-collapse .ant-collapse-content > .ant-collapse-content-box { + padding: 0; + } + } } .collapseItem { display: flex; @@ -11,40 +41,12 @@ cursor: pointer; } .collapseItem:hover { + color: #1664ff; background: rgba(22, 100, 255, 0.08); - color:#1664ff; } -.collapse { - :global { - .ant-collapse { - background-color: #fff; - border-color: transparent !important; - } - .ant-collapse > .ant-collapse-item > .ant-collapse-header { - margin-bottom: 5px; - background-color: #fff; - border-color: transparent; - padding: 20px 16px 15px 16px; - } - - .ant-collapse > .ant-collapse-item { - margin: 0 10px; - border-bottom:0.5px dashed rgba(20, 49, 179, 0.12); - border-radius: 0px; - } - .ant-collapse .ant-collapse-content { - padding-bottom: 15px; - border-top: 1px solid transparent; - } - .ant-collapse .ant-collapse-content > .ant-collapse-content-box { - padding: 0; - } - } -} -.modelMenusTitle{ - padding: 12px 25px; +.modelMenusTitle { margin-bottom: 10px; - color:#111111; -font-size:16px; -font-family: 'Alibaba'; -} \ No newline at end of file + padding: 12px 25px; + color: #111111; + font-size: 16px; +} diff --git a/react-ui/src/pages/Pipeline/editPipeline/props.jsx b/react-ui/src/pages/Pipeline/editPipeline/props.jsx index 179cd15..613007b 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/props.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/props.jsx @@ -8,7 +8,7 @@ import { pick } from 'lodash'; import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'; import PropsLabel from '../components/PropsLabel'; import ResourceSelectorModal, { ResourceSelectorType } from '../components/ResourceSelectorModal'; -import styles from './editPipeline.less'; +import styles from './props.less'; import { createMenuItems } from './utils'; const { TextArea } = Input; @@ -188,275 +188,273 @@ const Props = forwardRef(({ onParentChange }, ref) => { ); return ( - <> - +
- + +
+ -
- + + + + + +
+ +
+ +
+ + + + + +
- - - - - - -
- -
- -
- - - - - - -
- - { - handleParameterClick('working_directory', value); - }} - /> - } - > - - - { - handleParameterClick('command', value); - }} - /> - } - > -